@tcbs/react-native-mazic-ui 0.1.1

package/README.md

@@ -0,0 +1,216 @@
+# @tcbs/react-native-mazic-ui
+
+A customizable React Native UI component library.
+
+## Installation
+
+```sh
+npm install @tcbs/react-native-mazic-ui
+```
+
+
+## Theme Setup Example
+
+```tsx
+import { useTcbsColorStore } from '@tcbs/react-native-mazic-ui';
+
+const { setTcbsColor } = useTcbsColorStore();
+
+React.useEffect(() => {
+  setTcbsColor({
+    light: {
+      btnColor: '#007AFF',
+      btnBorderColor: '#007AFF',
+      btnIconColor: '#16a62bff',
+      themeColor: '#007AFF',
+      btnTextColor: '#FFFFFF',
+    },
+    dark: {
+      btnColor: '#222222',
+      btnBorderColor: '#222222',
+      btnIconColor: '#FFFFFF',
+      themeColor: '#222222',
+      btnTextColor: '#FFFFFF',
+    },
+  });
+}, []);
+```
+
+## Usage
+
+```tsx
+import { Button } from '@tcbs/react-native-mazic-ui';
+
+<Button title="Hello" onPress={() => {}} />
+```
+
+## TcbsButton Component Usage
+
+### Basic Usage
+
+```tsx
+import { TcbsButton } from '@tcbs/react-native-mazic-ui';
+
+<TcbsButton
+  title="Submit"
+  onPress={() => console.log('Pressed')}
+/>
+```
+
+### Size Variations
+
+```tsx
+<TcbsButton title="Large" size="large" onPress={...} />
+<TcbsButton title="Medium" size="medium" onPress={...} />
+<TcbsButton title="Small" size="small" onPress={...} />
+```
+
+
+### Variant Styles
+
+You can choose from three variants:
+
+- `primary`: Filled button with main color
+- `secondary`: Outlined button with border
+- `no_border`: Button with no border and matches screen background
+
+```tsx
+<View>
+  <TcbsButton
+    title="TCBS Button"
+    variant="primary"
+    onPress={() => console.log('TCBS Button Pressed')}
+    iconName="heart"
+    iconPosition="left"
+  />
+</View>
+<View>
+  <TcbsButton
+    title="TCBS Button"
+    variant="secondary"
+    onPress={() => console.log('TCBS Button Pressed')}
+    iconName="star"
+    iconPosition="right"
+  />
+</View>
+<View>
+  <TcbsButton
+    title="TCBS Button"
+    variant="no_border"
+    onPress={() => console.log('TCBS Button Pressed')}
+    iconName="home"
+    iconPosition="left"
+  />
+</View>
+```
+
+### Size Options
+
+You can choose from three sizes:
+
+- `large`: Large button (default)
+- `medium`: Medium button
+- `small`: Small button
+
+```tsx
+<TcbsButton title="Large" size="large" onPress={...} />
+<TcbsButton title="Medium" size="medium" onPress={...} />
+<TcbsButton title="Small" size="small" onPress={...} />
+```
+
+
+### Supported Icon Groups
+
+You can use the following icon groups for the `iconGroup` prop:
+
+- `AntDesign`
+- `Feather`
+- `FontAwesome`
+- `Foundation`
+- `Ionicons`
+- `MaterialDesignIcons`
+- `Octicons`
+- `Lucide` (if available in your project)
+
+Example usage:
+
+```tsx
+<TcbsButton
+  title="AntDesign"
+  iconName="check"
+  iconGroup="AntDesign"
+  iconPosition="left"
+  onPress={...}
+/>
+```
+
+
+```tsx
+<TcbsButton
+  title="AntDesign"
+  iconName="check"
+  iconGroup="AntDesign"
+  iconPosition="left"
+  onPress={...}
+/>
+
+<TcbsButton
+  title="Feather"
+  iconName="arrow-right"
+  iconGroup="Feather"
+  iconPosition="right"
+  onPress={...}
+/>
+
+<TcbsButton
+  title="Top Icon"
+  iconName="star"
+  iconGroup="FontAwesome"
+  iconPosition="top"
+  onPress={...}
+/>
+```
+
+### Custom Colors and Styles
+
+```tsx
+<TcbsButton
+  title="Custom"
+  style={{ backgroundColor: '#222' }}
+  textStyle={{ color: '#FFD700' }}
+  onPress={...}
+/>
+```
+
+### Accessibility
+
+```tsx
+<TcbsButton
+  title="Accessible"
+  accessibilityLabel="Submit button"
+  accessibilityHint="Submits the form"
+  accessibilityRole="button"
+  onPress={...}
+/>
+```
+
+### Disabled State
+
+```tsx
+<TcbsButton
+  title="Disabled"
+  disabled
+  onPress={...}
+/>
+```
+
+
+See the exported `TcbsButtonProps` type for all available options.
+
+---
+
+## License
+
+MIT
+
+Copyright (c) TechCraft By Subrata

package/lib/components/Button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { GestureResponderEvent } from 'react-native';
+type ButtonProps = {
+    title: string;
+    onPress: (event: GestureResponderEvent) => void;
+};
+export declare const Button: React.FC<ButtonProps>;
+export {};

package/lib/components/Button.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+export const Button = ({ title, onPress }) => (React.createElement(TouchableOpacity, { style: styles.button, onPress: onPress },
+    React.createElement(Text, { style: styles.text },
+        "TCBS 1: ",
+        title)));
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: '#007AFF',
+        padding: 12,
+        borderRadius: 8,
+        alignItems: 'center'
+    },
+    text: {
+        color: '#fff',
+        fontWeight: 'bold'
+    }
+});

package/lib/components/TcbsButton.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BUTTON_SIZE, BUTTON_VARIANT, BORDER_RADIUS, ButtonSize, ButtonVariant, IconGroupType, IconPosition, TcbsButtonProps } from './TcbsButton.types';
+/**
+ * TcbsButton - A themeable, accessible button component with icon support
+ *
+ * @example
+ * ```tsx
+ * <TcbsButton
+ *   title="Submit"
+ *   onPress={() => console.log('Pressed')}
+ *   size="large"
+ *   variant="primary"
+ *   iconName="check"
+ *   iconPosition="left"
+ * />
+ * ```
+ */
+export declare const TcbsButton: React.FC<TcbsButtonProps>;
+export { BUTTON_SIZE, BUTTON_VARIANT, BORDER_RADIUS };
+export type { ButtonSize, ButtonVariant, IconGroupType, IconPosition };

package/lib/components/TcbsButton.js

@@ -0,0 +1,117 @@
+import React, { useMemo } from 'react';
+import { TouchableOpacity, Text, View } from 'react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import Feather from 'react-native-vector-icons/Feather';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import Foundation from 'react-native-vector-icons/Foundation';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import MaterialDesignIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Octicons from 'react-native-vector-icons/Octicons';
+// import Lucide from 'react-native-vector-icons/Lucide';
+import { BUTTON_SIZE, BUTTON_VARIANT, BORDER_RADIUS, } from './TcbsButton.types';
+const HEIGHTS = {
+    [BUTTON_SIZE.LARGE]: 56,
+    [BUTTON_SIZE.MEDIUM]: 40,
+    [BUTTON_SIZE.SMALL]: 32,
+};
+const FONT_SIZES = {
+    [BUTTON_SIZE.LARGE]: 20,
+    [BUTTON_SIZE.MEDIUM]: 16,
+    [BUTTON_SIZE.SMALL]: 14,
+};
+const BORDER_RADIUSES = {
+    [BUTTON_SIZE.LARGE]: BORDER_RADIUS.MEDIUM,
+    [BUTTON_SIZE.MEDIUM]: BORDER_RADIUS.SMALL,
+    [BUTTON_SIZE.SMALL]: BORDER_RADIUS.SMALL,
+};
+/**
+ * TcbsButton - A themeable, accessible button component with icon support
+ *
+ * @example
+ * ```tsx
+ * <TcbsButton
+ *   title="Submit"
+ *   onPress={() => console.log('Pressed')}
+ *   size="large"
+ *   variant="primary"
+ *   iconName="check"
+ *   iconPosition="left"
+ * />
+ * ```
+ */
+export const TcbsButton = ({ title, onPress, size = BUTTON_SIZE.LARGE, variant = BUTTON_VARIANT.PRIMARY, borderRadius, disabled = false, style, textStyle, iconName, iconGroup = 'MaterialDesignIcons', iconColor, iconSize, iconPosition = 'top', accessibilityLabel, accessibilityHint, accessibilityRole = 'button', accessibilityState, themeColor = {
+    btnColor: '#007AFF',
+    themeColor: '#007AFF',
+    btnTextColor: '#FFFFFF',
+    btnTxtColor: '#FFFFFF',
+}, }) => {
+    const colors = themeColor;
+    const buttonStyle = useMemo(() => {
+        const baseStyle = {
+            height: HEIGHTS[size],
+            borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : BORDER_RADIUSES[size],
+            alignItems: 'center',
+            justifyContent: 'center',
+            opacity: disabled ? 0.6 : 1,
+            paddingHorizontal: 24,
+        };
+        if (variant === BUTTON_VARIANT.SECONDARY) {
+            return Object.assign(Object.assign(Object.assign({}, baseStyle), { backgroundColor: '#fff', borderWidth: 2, borderColor: colors.btnColor || colors.themeColor }), style);
+        }
+        if (variant === BUTTON_VARIANT.NO_BORDER) {
+            return Object.assign(Object.assign(Object.assign({}, baseStyle), { backgroundColor: '#fff' }), style);
+        }
+        // Primary variant (default)
+        return Object.assign(Object.assign(Object.assign({}, baseStyle), { backgroundColor: colors.btnColor || colors.themeColor, shadowColor: colors.btnColor, shadowOpacity: 0.15, shadowRadius: 6, shadowOffset: { width: 0, height: 2 }, elevation: 2 }), style);
+    }, [size, variant, colors, style, disabled, borderRadius]);
+    const themedTextStyle = useMemo(() => {
+        const baseTextColor = variant === BUTTON_VARIANT.PRIMARY
+            ? colors.btnTextColor || colors.btnTxtColor || '#fff'
+            : colors.btnColor || colors.themeColor;
+        return Object.assign({ color: baseTextColor, fontSize: FONT_SIZES[size], fontWeight: '700' }, textStyle);
+    }, [size, variant, colors, textStyle]);
+    const renderIcon = (IconComponent) => (React.createElement(IconComponent, { name: iconName, size: iconSize || FONT_SIZES[size] * 2, color: iconColor || themedTextStyle.color, style: iconPosition === 'top'
+            ? { marginBottom: 2 }
+            : iconPosition === 'left'
+                ? { marginRight: 8 }
+                : { marginLeft: 8 } }));
+    const renderText = (customStyle) => {
+        if (!title)
+            return null;
+        const finalStyle = customStyle
+            ? Object.assign({ color: themedTextStyle.color, fontSize: FONT_SIZES[size] - 4, fontWeight: '500' }, customStyle) : themedTextStyle;
+        return React.createElement(Text, { style: finalStyle }, title);
+    };
+    const renderContent = () => {
+        // If no icon, just render text
+        if (!iconName) {
+            return renderText();
+        }
+        // Map iconGroup string to actual component
+        const IconComponent = iconGroup === 'AntDesign' ? AntDesign :
+            iconGroup === 'Feather' ? Feather :
+                iconGroup === 'FontAwesome' ? FontAwesome :
+                    iconGroup === 'Foundation' ? Foundation :
+                        iconGroup === 'Ionicons' ? Ionicons :
+                            iconGroup === 'MaterialDesignIcons' ? MaterialDesignIcons :
+                                iconGroup === 'Octicons' ? Octicons :
+                                    // iconGroup === 'Lucide' ? Lucide : // Uncomment if Lucide is available
+                                    MaterialDesignIcons;
+        if (iconPosition === 'top') {
+            return (React.createElement(View, { style: { alignItems: 'center', justifyContent: 'center' } },
+                renderIcon(IconComponent),
+                renderText({ marginTop: 2 })));
+        }
+        const flexDirection = iconPosition === 'left' ? 'row' : 'row-reverse';
+        return (React.createElement(View, { style: {
+                flexDirection,
+                alignItems: 'center',
+                justifyContent: 'center',
+            } },
+            renderIcon(IconComponent),
+            renderText()));
+    };
+    return (React.createElement(TouchableOpacity, { onPress: onPress, disabled: disabled, style: buttonStyle, accessibilityLabel: accessibilityLabel || title, accessibilityHint: accessibilityHint, accessibilityRole: accessibilityRole, accessibilityState: accessibilityState || { disabled } }, renderContent()));
+};
+// Export constants for use in consuming applications
+export { BUTTON_SIZE, BUTTON_VARIANT, BORDER_RADIUS };

package/lib/components/TcbsButton.types.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle, TextStyle, AccessibilityRole, AccessibilityState, GestureResponderEvent } from 'react-native';
+export type IconComponentType = React.ComponentType<{
+    name: string;
+    size: number;
+    color: string;
+    style?: StyleProp<ViewStyle>;
+}>;
+export declare const BUTTON_SIZE: {
+    readonly LARGE: "large";
+    readonly MEDIUM: "medium";
+    readonly SMALL: "small";
+};
+export declare const BUTTON_VARIANT: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly NO_BORDER: "no_border";
+};
+export declare const BORDER_RADIUS: {
+    readonly SMALL: 8;
+    readonly MEDIUM: 12;
+    readonly LARGE: 16;
+};
+export type ButtonSize = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
+export type ButtonVariant = (typeof BUTTON_VARIANT)[keyof typeof BUTTON_VARIANT];
+export type IconGroupType = 'AntDesign' | 'Feather' | 'FontAwesome' | 'Foundation' | 'Ionicons' | 'MaterialDesignIcons' | 'Octicons' | 'Lucide';
+export type IconPosition = 'top' | 'left' | 'right';
+export interface TcbsButtonProps {
+    title?: string;
+    onPress: (event: GestureResponderEvent) => void;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    borderRadius?: number;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    iconName?: string;
+    iconGroup?: IconGroupType;
+    iconColor?: string;
+    iconSize?: number;
+    iconPosition?: IconPosition;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    accessibilityRole?: AccessibilityRole;
+    accessibilityState?: AccessibilityState;
+    themeColor?: {
+        btnColor?: string;
+        themeColor?: string;
+        btnTextColor?: string;
+        btnTxtColor?: string;
+    };
+}

package/lib/components/TcbsButton.types.js

@@ -0,0 +1,15 @@
+export const BUTTON_SIZE = {
+    LARGE: 'large',
+    MEDIUM: 'medium',
+    SMALL: 'small',
+};
+export const BUTTON_VARIANT = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    NO_BORDER: 'no_border',
+};
+export const BORDER_RADIUS = {
+    SMALL: 8,
+    MEDIUM: 12,
+    LARGE: 16,
+};

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './components/Button';
+export { TcbsButton } from './components/TcbsButton';
+export { BUTTON_SIZE, BUTTON_VARIANT, BORDER_RADIUS, ButtonSize, ButtonVariant, IconGroupType, IconPosition, TcbsButtonProps, IconComponentType, } from './components/TcbsButton.types';

package/lib/index.js

@@ -0,0 +1,3 @@
+export { Button } from './components/Button';
+export { TcbsButton } from './components/TcbsButton';
+export { BUTTON_SIZE, BUTTON_VARIANT, BORDER_RADIUS, } from './components/TcbsButton.types';

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@tcbs/react-native-mazic-ui",
+  "description": "A customizable React Native UI component library with theme support, modern buttons, and icon integration By TechCraft By Subrata.",
+  "keywords": [
+    "react-native",
+    "react-native-mazic-components",
+    "ui",
+    "component-library",
+    "button",
+    "theme",
+    "mazic",
+    "tcbs",
+    "react-native-vector-icons"
+  ],
+  "author": "TechCraft By Subrata <subraatakumar@gmail.com>",
+  "version": "0.1.1",
+    "publishConfig": {
+    "access": "public"
+  },
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/types/index.d.ts",
+  "react-native": "src/index.ts",
+  "files": [
+    "lib/",
+    "src/"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.68.0",
+    "react-native-vector-icons": ">=10.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-native": "^0.68.0",
+    "eslint": "^8.0.0",
+    "jest": "^29.0.0",
+    "react-native-vector-icons": "^10.3.0",
+    "typescript": "^4.9.5"
+  },
+  "license": "MIT",
+  "homepage": "https://tcbscli.subraatakumar.com/ui-home",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TechCraft-By-Subrata/react-native-mazic-ui.git"
+  }
+}

package/src/components/Button.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet, GestureResponderEvent } from 'react-native';
+
+type ButtonProps = {
+  title: string;
+  onPress: (event: GestureResponderEvent) => void;
+};
+
+export const Button: React.FC<ButtonProps> = ({ title, onPress }) => (
+  <TouchableOpacity style={styles.button} onPress={onPress}>
+    <Text style={styles.text}>TCBS 1: {title}</Text>
+  </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: '#007AFF',
+    padding: 12,
+    borderRadius: 8,
+    alignItems: 'center'
+  },
+  text: {
+    color: '#fff',
+    fontWeight: 'bold'
+  }
+});

package/src/components/ExampleScreen.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { useTcbsColorStore } from '../store/themeStore';
+
+const ExampleScreen: React.FC = () => {
+  const { colors, mode } = useTcbsColorStore();
+  const screenBgColor = colors[mode].screenBgColor;
+
+  return (
+    <View style={{ flex: 1, backgroundColor: screenBgColor }}>
+      <Text style={{ color: colors[mode].btnTextColor }}>
+        This screen uses theme screenBgColor!
+      </Text>
+      {/* Add your other components here */}
+    </View>
+  );
+};
+
+export default ExampleScreen;

package/src/components/TcbsButton.tsx

@@ -0,0 +1,235 @@
+import React, { useMemo } from 'react';
+import { TouchableOpacity, Text, View ,  StyleProp, ViewStyle, TextStyle } from 'react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import Feather from 'react-native-vector-icons/Feather';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import Foundation from 'react-native-vector-icons/Foundation';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import MaterialDesignIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Octicons from 'react-native-vector-icons/Octicons';
+// import Lucide from 'react-native-vector-icons/Lucide';
+import {
+  BUTTON_SIZE,
+  BUTTON_VARIANT,
+  BORDER_RADIUS,
+  ButtonSize,
+  ButtonVariant,
+  IconGroupType,
+  IconPosition,
+  TcbsButtonProps,
+  IconComponentType,
+} from './TcbsButton.types';
+import { useTcbsColorStore } from '../store/themeStore';
+
+const HEIGHTS: Record<ButtonSize, number> = {
+  [BUTTON_SIZE.LARGE]: 56,
+  [BUTTON_SIZE.MEDIUM]: 40,
+  [BUTTON_SIZE.SMALL]: 32,
+};
+
+const FONT_SIZES: Record<ButtonSize, number> = {
+  [BUTTON_SIZE.LARGE]: 20,
+  [BUTTON_SIZE.MEDIUM]: 16,
+  [BUTTON_SIZE.SMALL]: 14,
+};
+
+const BORDER_RADIUSES: Record<ButtonSize, number> = {
+  [BUTTON_SIZE.LARGE]: BORDER_RADIUS.MEDIUM,
+  [BUTTON_SIZE.MEDIUM]: BORDER_RADIUS.SMALL,
+  [BUTTON_SIZE.SMALL]: BORDER_RADIUS.SMALL,
+};
+
+/**
+ * TcbsButton - A themeable, accessible button component with icon support
+ * 
+ * @example
+ * ```tsx
+ * <TcbsButton
+ *   title="Submit"
+ *   onPress={() => console.log('Pressed')}
+ *   size="large"
+ *   variant="primary"
+ *   iconName="check"
+ *   iconPosition="left"
+ * />
+ * ```
+ */
+export const TcbsButton: React.FC<TcbsButtonProps> = ({
+  title,
+  onPress,
+  size = BUTTON_SIZE.LARGE,
+  variant = BUTTON_VARIANT.PRIMARY,
+  borderRadius,
+  disabled = false,
+  style,
+  textStyle,
+  iconName,
+  iconGroup = 'MaterialDesignIcons',
+  iconColor,
+  iconSize,
+  iconPosition = 'top',
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole = 'button',
+  accessibilityState,
+  themeColor,
+  screenBgColor,
+}) => {
+  // Use theme from store if not provided as prop
+  const { colors, mode } = useTcbsColorStore();
+  const effectiveThemeColor = themeColor ?? colors[mode];
+  // Normalize colors: if only one color is set, use it for all
+  const normalizedColors = {
+    btnColor: effectiveThemeColor?.btnColor ?? effectiveThemeColor?.themeColor ?? '#007AFF',
+    btnBorderColor: effectiveThemeColor?.btnBorderColor ?? effectiveThemeColor?.btnColor ?? '#007AFF',
+    btnIconColor: effectiveThemeColor?.btnIconColor,
+    btnTextColor: effectiveThemeColor?.btnTextColor ?? effectiveThemeColor?.btnTxtColor  ,
+    themeColor: effectiveThemeColor?.themeColor ?? effectiveThemeColor?.btnColor ?? '#007AFF',
+  };
+
+  const buttonStyle = useMemo<StyleProp<ViewStyle>>(() => {
+    const baseStyle: ViewStyle = {
+      height: HEIGHTS[size],
+      borderRadius: borderRadius ?? BORDER_RADIUSES[size],
+      alignItems: 'center',
+      justifyContent: 'center',
+      opacity: disabled ? 0.6 : 1,
+      paddingHorizontal: 24,
+    };
+
+    if (variant === BUTTON_VARIANT.SECONDARY) {
+      return {
+        ...baseStyle,
+        backgroundColor: '#fff',
+        borderWidth: 2,
+        borderColor: normalizedColors.btnBorderColor,
+        ...(style as ViewStyle),
+      };
+    }
+
+    if (variant === BUTTON_VARIANT.NO_BORDER) {
+      return {
+        ...baseStyle,
+        backgroundColor: 'transparent',
+        ...(style as ViewStyle),
+      };
+    }
+
+    // Primary variant (default)
+    return {
+      ...baseStyle,
+      backgroundColor: normalizedColors.btnColor,
+      shadowColor: normalizedColors.btnColor,
+      shadowOpacity: 0.15,
+      shadowRadius: 6,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+      ...(style as ViewStyle),
+    };
+  }, [size, variant, normalizedColors, style, disabled, borderRadius]);
+
+  const themedTextStyle = useMemo<TextStyle>(() => {
+    const baseTextColor =
+      variant === BUTTON_VARIANT.PRIMARY
+        ? normalizedColors.btnTextColor || '#FFFFFF'
+        : variant === BUTTON_VARIANT.NO_BORDER && mode === 'dark' ? normalizedColors.btnTextColor || "#FFFFFF" : normalizedColors?.btnColor || normalizedColors?.themeColor || "#FFFFFF";
+
+    return {
+      color: baseTextColor,
+      fontSize: FONT_SIZES[size],
+      fontWeight: '700',
+      ...(textStyle as TextStyle),
+    };
+  }, [size, variant, normalizedColors, textStyle]);
+
+  const renderIcon = (IconComponent: IconComponentType) => (
+    <IconComponent
+      name={iconName!}
+      size={iconSize || FONT_SIZES[size] * 2}
+      color={iconColor || normalizedColors.btnIconColor || themedTextStyle.color}
+      style={
+        iconPosition === 'top'
+          ? { marginBottom: 2 }
+          : iconPosition === 'left'
+          ? { marginRight: 8 }
+          : { marginLeft: 8 }
+      }
+    />
+  );
+
+  const renderText = (customStyle?: TextStyle) => {
+    if (!title) return null;
+
+    const finalStyle: TextStyle = customStyle
+      ? {
+          color: themedTextStyle.color,
+          fontSize: FONT_SIZES[size] - 4,
+          fontWeight: '500',
+          ...customStyle,
+        }
+      : themedTextStyle;
+
+    return <Text style={finalStyle}>{title}</Text>;
+  };
+
+  const renderContent = () => {
+    // If no icon, just render text
+    if (!iconName) {
+      return renderText();
+    }
+
+    // Map iconGroup string to actual component
+    const IconComponent: IconComponentType =
+      iconGroup === 'AntDesign' ? AntDesign :
+      iconGroup === 'Feather' ? Feather :
+      iconGroup === 'FontAwesome' ? FontAwesome :
+      iconGroup === 'Foundation' ? Foundation :
+      iconGroup === 'Ionicons' ? Ionicons :
+      iconGroup === 'MaterialDesignIcons' ? MaterialDesignIcons :
+      iconGroup === 'Octicons' ? Octicons :
+      // iconGroup === 'Lucide' ? Lucide : // Uncomment if Lucide is available
+      MaterialDesignIcons;
+
+    if (iconPosition === 'top') {
+      return (
+        <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+          {renderIcon(IconComponent)}
+          {renderText({ marginTop: 2 })}
+        </View>
+      );
+    }
+
+    const flexDirection = iconPosition === 'left' ? 'row' : 'row-reverse';
+
+    return (
+      <View
+        style={{
+          flexDirection,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {renderIcon(IconComponent)}
+        {renderText()}
+      </View>
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      style={buttonStyle}
+      accessibilityLabel={accessibilityLabel || title}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={accessibilityState || { disabled }}
+    >
+      {renderContent()}
+    </TouchableOpacity>
+  );
+};
+
+// Export constants for use in consuming applications
+export { BUTTON_SIZE, BUTTON_VARIANT, BORDER_RADIUS };
+export type { ButtonSize, ButtonVariant, IconGroupType, IconPosition };

package/src/components/TcbsButton.types.ts

@@ -0,0 +1,70 @@
+import { StyleProp, ViewStyle, TextStyle, AccessibilityRole, AccessibilityState, GestureResponderEvent } from 'react-native';
+
+export type IconComponentType = React.ComponentType<{
+  name: string;
+  size: number;
+  color: string;
+  style?: StyleProp<ViewStyle>;
+}>;
+
+export const BUTTON_SIZE = {
+  LARGE: 'large',
+  MEDIUM: 'medium',
+  SMALL: 'small',
+} as const;
+
+export const BUTTON_VARIANT = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  NO_BORDER: 'no_border',
+} as const;
+
+export const BORDER_RADIUS = {
+  SMALL: 8,
+  MEDIUM: 12,
+  LARGE: 16,
+} as const;
+
+export type ButtonSize = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
+export type ButtonVariant = (typeof BUTTON_VARIANT)[keyof typeof BUTTON_VARIANT];
+
+export type IconGroupType =
+  | 'AntDesign'
+  | 'Feather'
+  | 'FontAwesome'
+  | 'Foundation'
+  | 'Ionicons'
+  | 'MaterialDesignIcons'
+  | 'Octicons'
+  | 'Lucide';
+
+export type IconPosition = 'top' | 'left' | 'right';
+
+export interface TcbsButtonProps {
+  title?: string;
+  onPress: (event: GestureResponderEvent) => void;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  borderRadius?: number;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  iconName?: string;
+  iconGroup?: IconGroupType;
+  iconColor?: string;
+  iconSize?: number;
+  iconPosition?: IconPosition;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityRole?: AccessibilityRole;
+  accessibilityState?: AccessibilityState;
+  themeColor?: {
+    btnColor?: string;
+    btnBorderColor?: string;
+    btnIconColor?: string;
+    themeColor?: string;
+    btnTextColor?: string;
+    btnTxtColor?: string;
+  };
+  screenBgColor?: string;
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+export { Button } from './components/Button';
+export { TcbsButton } from './components/TcbsButton';
+export {
+	BUTTON_SIZE,
+	BUTTON_VARIANT,
+	BORDER_RADIUS,
+	ButtonSize,
+	ButtonVariant,
+	IconGroupType,
+	IconPosition,
+	TcbsButtonProps,
+	IconComponentType,
+} from './components/TcbsButton.types';
+export { useTcbsColorStore } from './store/themeStore';

package/src/store/themeStore.ts

@@ -0,0 +1,66 @@
+import { create } from 'zustand';
+
+export type ThemeColor = {
+  btnColor: string;
+  btnBorderColor?: string;
+  btnIconColor?: string;
+  themeColor: string;
+  btnTextColor: string;
+  screenBgColor?: string;
+};
+
+export type ThemeMode = 'light' | 'dark';
+
+export type ThemeColors = {
+  light: ThemeColor;
+  dark: ThemeColor;
+};
+
+export interface ThemeStore {
+  colors: ThemeColors;
+  mode: ThemeMode;
+  setTcbsColor: (colors: Partial<ThemeColor> & { light?: Partial<ThemeColor>; dark?: Partial<ThemeColor> }) => void;
+  setTcbsTheme: (mode: ThemeMode) => void;
+}
+
+const defaultColors: ThemeColors = {
+  light: {
+    // btnColor: '#007AFF',
+    // btnBorderColor: '#007AFF',
+    // btnIconColor: '#16a62bff',
+    // themeColor: '#007AFF',
+    // btnTextColor: '#FFFFFF',
+  },
+  dark: {
+    // btnColor: '#222222',
+    // btnBorderColor: '#222222',
+    // btnIconColor: '#FFFFFF',
+    // themeColor: '#222222',
+    // btnTextColor: '#FFFFFF',
+  },
+};
+
+export const useTcbsColorStore = create<ThemeStore>((set: (fn: (state: ThemeStore) => Partial<ThemeStore>) => void) => ({
+  colors: defaultColors,
+  mode: 'light',
+  setTcbsColor: (colors: Partial<ThemeColor> & { light?: Partial<ThemeColor>; dark?: Partial<ThemeColor> }) => {
+    set((state: ThemeStore) => {
+      let newColors = { ...state.colors };
+      // If colors for both themes are provided
+      if (colors.light || colors.dark) {
+        if (colors.light) {
+          newColors.light = { ...newColors.light, ...colors.light };
+        }
+        if (colors.dark) {
+          newColors.dark = { ...newColors.dark, ...colors.dark };
+        }
+      } else {
+        // If only one set, update both themes
+        newColors.light = { ...newColors.light, ...colors };
+        newColors.dark = { ...newColors.dark, ...colors };
+      }
+      return { colors: newColors };
+    });
+  },
+  setTcbsTheme: (mode: ThemeMode) => set((state) => ({ ...state, mode })),
+}));