@tcbs/react-native-mazic-ui 0.1.2 → 0.1.4

package/lib/components/ExampleScreen.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExampleScreen: React.FC;
+export default ExampleScreen;

package/lib/components/ExampleScreen.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { useTcbsColorStore } from '../store/themeStore';
+const ExampleScreen = () => {
+    const { colors, mode } = useTcbsColorStore();
+    const screenBgColor = colors[mode].screenBgColor;
+    return (React.createElement(View, { style: { flex: 1, backgroundColor: screenBgColor } },
+        React.createElement(Text, { style: { color: colors[mode].btnTextColor } }, "This screen uses theme screenBgColor!")));
+};
+export default ExampleScreen;

package/lib/components/TcbsButton.js

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { Appearance } from 'react-native';
 import { TouchableOpacity, Text, View } from 'react-native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
 import Feather from 'react-native-vector-icons/Feather';
@@ -9,6 +10,7 @@ import MaterialDesignIcons from 'react-native-vector-icons/MaterialCommunityIcon
 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';
+import { useTcbsColorStore } from '../store/themeStore';
 const HEIGHTS = {
     [BUTTON_SIZE.LARGE]: 56,
     [BUTTON_SIZE.MEDIUM]: 40,
@@ -19,6 +21,7 @@ const FONT_SIZES = {
     [BUTTON_SIZE.MEDIUM]: 16,
     [BUTTON_SIZE.SMALL]: 14,
 };
+// Support for BORDER_RADIUS.NONE and BORDER_RADIUS.FULL (50%)
 const BORDER_RADIUSES = {
     [BUTTON_SIZE.LARGE]: BORDER_RADIUS.MEDIUM,
     [BUTTON_SIZE.MEDIUM]: BORDER_RADIUS.SMALL,
@@ -39,37 +42,70 @@ const BORDER_RADIUSES = {
  * />
  * ```
  */
-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;
+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, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    // Use themeColors from store if not provided as prop
+    const { themeColors, tcbsTheme } = useTcbsColorStore();
+    const effectiveThemeColor = themeColors;
+    // Normalize colors: if only one color is set, use it for all
+    const normalizedColors = {
+        btnColor: (_b = (_a = effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnColor) !== null && _a !== void 0 ? _a : effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.themeColor) !== null && _b !== void 0 ? _b : '#007AFF',
+        btnBorderColor: (_d = (_c = effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnBorderColor) !== null && _c !== void 0 ? _c : effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnColor) !== null && _d !== void 0 ? _d : '#007AFF',
+        btnIconColor: effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnIconColor,
+        btnTextColor: (_e = effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnTextColor) !== null && _e !== void 0 ? _e : effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnTxtColor,
+        themeColor: (_g = (_f = effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.themeColor) !== null && _f !== void 0 ? _f : effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnColor) !== null && _g !== void 0 ? _g : '#007AFF',
+    };
     const buttonStyle = useMemo(() => {
+        const height = HEIGHTS[size];
+        let computedBorderRadius;
+        if (borderRadius === BORDER_RADIUS.NONE) {
+            computedBorderRadius = 0;
+        }
+        else if (borderRadius === BORDER_RADIUS.FULL) {
+            computedBorderRadius = height / 2;
+        }
+        else if (borderRadius !== undefined) {
+            computedBorderRadius = borderRadius;
+        }
+        else {
+            computedBorderRadius = BORDER_RADIUSES[size];
+        }
         const baseStyle = {
-            height: HEIGHTS[size],
-            borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : BORDER_RADIUSES[size],
+            height,
+            borderRadius: computedBorderRadius,
             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);
+            return Object.assign(Object.assign(Object.assign({}, baseStyle), { backgroundColor: '#fff', borderWidth: 2, borderColor: normalizedColors.btnBorderColor }), style);
         }
         if (variant === BUTTON_VARIANT.NO_BORDER) {
-            return Object.assign(Object.assign(Object.assign({}, baseStyle), { backgroundColor: '#fff' }), style);
+            return Object.assign(Object.assign(Object.assign({}, baseStyle), { backgroundColor: 'transparent' }), 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]);
+        return Object.assign(Object.assign(Object.assign({}, baseStyle), { backgroundColor: normalizedColors.btnColor, shadowColor: normalizedColors.btnColor, shadowOpacity: 0.15, shadowRadius: 6, shadowOffset: { width: 0, height: 2 }, elevation: 2 }), style);
+    }, [size, variant, normalizedColors, style, disabled, borderRadius]);
     const themedTextStyle = useMemo(() => {
-        const baseTextColor = variant === BUTTON_VARIANT.PRIMARY
-            ? colors.btnTextColor || colors.btnTxtColor || '#fff'
-            : colors.btnColor || colors.themeColor;
+        let baseTextColor;
+        if (variant === BUTTON_VARIANT.PRIMARY) {
+            baseTextColor = normalizedColors.btnTextColor || '#FFFFFF';
+        }
+        else if (variant === BUTTON_VARIANT.NO_BORDER) {
+            let colorScheme = tcbsTheme;
+            if (tcbsTheme === 'system') {
+                colorScheme = Appearance.getColorScheme() || 'light';
+            }
+            baseTextColor = colorScheme === 'dark'
+                ? normalizedColors.btnTextColor || '#FFFFFF'
+                : (normalizedColors === null || normalizedColors === void 0 ? void 0 : normalizedColors.btnColor) || '#007AFF';
+        }
+        else {
+            baseTextColor = (normalizedColors === null || normalizedColors === void 0 ? void 0 : normalizedColors.btnColor) || '#FFFFFF';
+        }
         return Object.assign({ color: baseTextColor, fontSize: FONT_SIZES[size], fontWeight: '700' }, textStyle);
-    }, [size, variant, colors, textStyle]);
+    }, [size, variant, normalizedColors, textStyle, tcbsTheme]);
     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'
@@ -113,5 +149,4 @@ export const TcbsButton = ({ title, onPress, size = BUTTON_SIZE.LARGE, variant =
     };
     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

@@ -20,6 +20,8 @@ export declare const BORDER_RADIUS: {
     readonly SMALL: 8;
     readonly MEDIUM: 12;
     readonly LARGE: 16;
+    readonly NONE: 0;
+    readonly FULL: "50%";
 };
 export type ButtonSize = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
 export type ButtonVariant = (typeof BUTTON_VARIANT)[keyof typeof BUTTON_VARIANT];
@@ -45,8 +47,11 @@ export interface TcbsButtonProps {
     accessibilityState?: AccessibilityState;
     themeColor?: {
         btnColor?: string;
+        btnBorderColor?: string;
+        btnIconColor?: string;
         themeColor?: string;
         btnTextColor?: string;
         btnTxtColor?: string;
     };
+    screenBgColor?: string;
 }

package/lib/components/TcbsButton.types.js

@@ -12,4 +12,6 @@ export const BORDER_RADIUS = {
     SMALL: 8,
     MEDIUM: 12,
     LARGE: 16,
+    NONE: 0,
+    FULL: '50%',
 };

package/lib/components/ThemeModal.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ThemeModalProps {
+    visible: boolean;
+    onClose: () => void;
+}
+export declare const ThemeModal: React.FC<ThemeModalProps>;
+export default ThemeModal;

package/lib/components/ThemeModal.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Modal, Pressable, View, Text, StyleSheet } from 'react-native';
+import { useTcbsColorStore } from '../store/themeStore';
+import { BUTTON_VARIANT, TcbsButton } from './TcbsButton';
+export const ThemeModal = ({ visible, onClose }) => {
+    const { tcbsTheme, setTcbsTheme, themeColors } = useTcbsColorStore();
+    // You can customize these colors or get them from your theme
+    const colors = {
+        menuCardBkgColor: themeColors.screenBgColor || '#fff',
+        textDark: themeColors.modalTitleColor || '#222',
+        textGray: '#888',
+    };
+    return (React.createElement(Modal, { transparent: true, animationType: "fade", visible: visible, onRequestClose: onClose },
+        React.createElement(Pressable, { style: styles.modalOverlay, onPress: onClose },
+            React.createElement(Pressable, { style: [styles.modalCard, { backgroundColor: themeColors.modalBgColor || "#00000080" }], onPress: () => { } },
+                React.createElement(View, { style: styles.modalClose },
+                    React.createElement(TcbsButton, { onPress: onClose, iconName: "close", iconColor: colors.textDark, iconPosition: "left", variant: BUTTON_VARIANT.NO_BORDER, iconSize: 22, accessibilityLabel: "Close", style: { padding: 8, marginRight: 0, minWidth: 0, minHeight: 0, alignSelf: 'flex-end' } })),
+                React.createElement(Text, { style: [styles.modalTitle, { color: colors.textDark }] }, "Theme"),
+                React.createElement(Text, { style: [styles.modalSubtitle, { color: colors.textDark }] }, "Choose how the app looks on this device."),
+                React.createElement(View, { style: { marginTop: 18 } },
+                    React.createElement(TcbsButton, { title: "Light", onPress: () => setTcbsTheme('light'), style: { marginBottom: 8 }, variant: tcbsTheme === 'light' ? 'primary' : 'secondary', iconGroup: "Ionicons", iconName: "sunny", iconPosition: "left", textStyle: { flex: 1, textAlign: 'center' } }),
+                    React.createElement(TcbsButton, { title: "Dark", onPress: () => setTcbsTheme('dark'), style: { marginBottom: 8 }, variant: tcbsTheme === 'dark' ? 'primary' : 'secondary', iconGroup: "Ionicons", iconName: "moon", iconPosition: "left", textStyle: { flex: 1, textAlign: 'center' } }),
+                    React.createElement(TcbsButton, { title: "System (default)", onPress: () => setTcbsTheme('system'), variant: tcbsTheme === 'system' ? 'primary' : 'secondary', iconGroup: "Ionicons", iconName: "settings", iconPosition: "left", textStyle: { flex: 1, textAlign: 'center' } }))))));
+};
+const styles = StyleSheet.create({
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.3)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    modalCard: {
+        minWidth: 300,
+        borderRadius: 16,
+        padding: 24,
+        alignItems: 'stretch',
+        // shadowColor: '#000',
+        // shadowOpacity: 0.15,
+        shadowRadius: 12,
+        // shadowOffset: { width: 0, height: 4 },
+        // elevation: 4,
+    },
+    modalClose: {
+        position: 'absolute',
+        top: 8,
+        right: 8,
+        zIndex: 2,
+    },
+    modalTitle: {
+        fontSize: 20,
+        fontWeight: '700',
+        marginTop: 8,
+        marginBottom: 2,
+        textAlign: 'center',
+    },
+    modalSubtitle: {
+        fontSize: 14,
+        fontWeight: '400',
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+});
+export default ThemeModal;

package/lib/components/error/AppErrorBoundary.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface AppErrorBoundaryProps {
+    children?: React.ReactNode;
+}
+export interface AppErrorBoundaryState {
+    hasError: boolean;
+    error: any;
+    reactError: {
+        name?: string;
+        message?: string;
+        stack?: string;
+    } | null;
+    errorInfo: {
+        componentStack?: string;
+    } | null;
+}
+export declare class AppErrorBoundary extends React.Component<AppErrorBoundaryProps, AppErrorBoundaryState> {
+    state: AppErrorBoundaryState;
+    static getDerivedStateFromError(error: any): {
+        hasError: boolean;
+        error: any;
+    };
+    componentDidCatch(error: any, errorInfo: any): void;
+    renderDevError(): React.JSX.Element | null;
+    renderProdError(): React.JSX.Element;
+    render(): React.ReactNode;
+}

package/lib/components/error/AppErrorBoundary.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { setupGlobalExceptionHandlers } from './setupGlobalExceptionHandlers';
+setupGlobalExceptionHandlers();
+export class AppErrorBoundary extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            hasError: false,
+            error: null,
+            reactError: null,
+            errorInfo: null,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        // Log exactly what React gives
+        console.log('React Render Error:', error);
+        // Store everything needed for UI
+        this.setState({
+            error,
+            reactError: {
+                name: error === null || error === void 0 ? void 0 : error.name,
+                message: error === null || error === void 0 ? void 0 : error.message,
+                stack: error === null || error === void 0 ? void 0 : error.stack,
+            },
+            errorInfo,
+        });
+    }
+    renderDevError() {
+        const { error, reactError, errorInfo } = this.state;
+        if (!error)
+            return null;
+        return (React.createElement(SafeAreaView, { style: { flex: 1 } },
+            React.createElement(ScrollView, { style: styles.container },
+                React.createElement(Text, { style: styles.title }, "\uD83D\uDEA8 Application Error (DEV)"),
+                React.createElement(Section, { title: "\u274C What happened" },
+                    React.createElement(Text, { style: styles.errorText },
+                        error.name,
+                        ": ",
+                        error.message)),
+                React.createElement(Section, { title: "\u269B\uFE0F React render error" },
+                    React.createElement(Text, { style: styles.mono }, reactError === null || reactError === void 0 ? void 0 : reactError.stack)),
+                React.createElement(Section, { title: "\uD83D\uDCDC Component stack (Advanced)" },
+                    React.createElement(Text, { style: styles.stack }, errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.componentStack)))));
+    }
+    renderProdError() {
+        return (React.createElement(View, { style: styles.prodContainer },
+            React.createElement(Text, { style: styles.prodTitle }, "Something went wrong"),
+            React.createElement(Text, { style: styles.prodSubtitle }, "Please restart the application.")));
+    }
+    render() {
+        if (this.state.hasError) {
+            return __DEV__ ? this.renderDevError() : this.renderProdError();
+        }
+        return this.props.children;
+    }
+}
+const Section = ({ title, children }) => (React.createElement(View, { style: styles.section },
+    React.createElement(Text, { style: styles.sectionTitle }, title),
+    children));
+/* ---------- Styles ---------- */
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#0f172a',
+        padding: 16,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#f87171',
+        marginBottom: 12,
+    },
+    section: {
+        marginBottom: 16,
+    },
+    sectionTitle: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#38bdf8',
+        marginBottom: 6,
+    },
+    errorText: {
+        color: '#fecaca',
+        fontSize: 14,
+    },
+    mono: {
+        fontSize: 12,
+        color: '#e5e7eb',
+        lineHeight: 16,
+    },
+    stack: {
+        fontSize: 11,
+        color: '#94a3b8',
+        lineHeight: 16,
+    },
+    prodContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+    },
+    prodTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        marginBottom: 8,
+    },
+    prodSubtitle: {
+        fontSize: 14,
+        color: '#666',
+        textAlign: 'center',
+    },
+});

package/lib/index.d.ts

@@ -1,3 +1,5 @@
-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';
+export { ThemeModal } from './components/ThemeModal';
+export { AppErrorBoundary } from './components/error/AppErrorBoundary';

package/lib/index.js

@@ -1,3 +1,5 @@
-export { Button } from './components/Button';
 export { TcbsButton } from './components/TcbsButton';
 export { BUTTON_SIZE, BUTTON_VARIANT, BORDER_RADIUS, } from './components/TcbsButton.types';
+export { useTcbsColorStore } from './store/themeStore';
+export { ThemeModal } from './components/ThemeModal';
+export { AppErrorBoundary } from './components/error/AppErrorBoundary';

package/lib/store/themeStore.d.ts

@@ -0,0 +1,52 @@
+export type ThemeColor = {
+    btnColor: string;
+    btnBorderColor?: string;
+    btnIconColor?: string;
+    themeColor: string;
+    btnTextColor: string;
+    tabBarIconActiveColor?: string;
+    tabBarIconInactiveColor?: string;
+    modalBgColor?: string;
+    primaryColor?: string;
+    secondaryColor?: string;
+    tertiaryColor?: string;
+    screenBgColor?: string;
+    modalHeaderBgColor?: string;
+    modalCardBgColor?: string;
+    modalTitleColor?: string;
+    textPrimary?: string;
+    textSecondary?: string;
+    borderColor?: string;
+    dividerColor?: string;
+    inputBgColor?: string;
+    inputBorderColor?: string;
+    cardBgColor?: string;
+    cardBorderColor?: string;
+    accentColor?: string;
+    errorColor?: string;
+    successColor?: string;
+    warningColor?: string;
+};
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ThemeColors = {
+    light: ThemeColor;
+    dark: ThemeColor;
+};
+export interface ThemeStore {
+    colors: ThemeColors;
+    tcbsTheme: ThemeMode;
+    themeColors: ThemeColor;
+    /**
+     * Returns the current theme as 'light' or 'dark' (never 'system').
+     * If tcbsTheme is 'system', resolves to the current system color scheme.
+     */
+    currentThemeMode: 'light' | 'dark';
+    setTcbsColor: (colors: Partial<ThemeColor> & {
+        light?: Partial<ThemeColor>;
+        dark?: Partial<ThemeColor>;
+    }) => void;
+    setTcbsTheme: (mode: ThemeMode) => void;
+    toggleTcbsTheme: () => void;
+    setMazicColor: (baseColor: string) => void;
+}
+export declare const useTcbsColorStore: any;

package/lib/store/themeStore.js

@@ -0,0 +1,258 @@
+import { create } from 'zustand';
+import { Appearance } from 'react-native';
+import { MMKV } from 'react-native-mmkv';
+// MMKV instance for theme persistence
+const storage = new MMKV();
+const THEME_KEY = 'tcbsTheme';
+// Store the listener subscription so we can remove it
+let appearanceListener = null;
+const defaultColors = {
+    light: {
+        // You can set initial defaults here if needed, or leave them empty
+        btnColor: '#007AFF',
+        btnBorderColor: '#007AFF',
+        btnIconColor: '#FFFFFF',
+        themeColor: '#007AFF',
+        btnTextColor: '#FFFFFF',
+    },
+    dark: {
+        btnColor: '#222222',
+        btnBorderColor: '#222222',
+        btnIconColor: '#FFFFFF',
+        themeColor: '#222222',
+        btnTextColor: '#FFFFFF',
+    },
+};
+// Try to load persisted theme, fallback to 'light'. If 'system', use current system color scheme.
+const defaultTheme = storage.getString(THEME_KEY) || 'light';
+// Helper functions for color manipulation
+const hexToRgb = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+};
+const rgbToHex = (r, g, b) => {
+    return '#' + [r, g, b].map(x => {
+        const hex = Math.round(x).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    }).join('');
+};
+const adjustBrightness = (hex, percent) => {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return hex;
+    // percent > 0: lighten, percent < 0: darken
+    const adjust = (value) => {
+        if (percent > 0) {
+            return Math.round(value + (255 - value) * (percent / 100));
+        }
+        else {
+            return Math.round(value * (1 + percent / 100));
+        }
+    };
+    return rgbToHex(adjust(rgb.r), adjust(rgb.g), adjust(rgb.b));
+};
+// NEW HELPER: Determines if a color is dark enough to require white text
+const isColorDark = (hex) => {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return true; // Default to white text if color is invalid
+    // Calculate Luma (YIQ method is good for perceived brightness)
+    // Formula: (R * 299 + G * 587 + B * 114) / 1000
+    const luma = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+    // Threshold 0.45 is slightly lower than standard 0.5, favoring white text
+    return luma < 0.45;
+};
+const addAlpha = (hex, alpha) => {
+    const alphaHex = Math.round(alpha * 255).toString(16).padStart(2, '0');
+    return hex + alphaHex;
+};
+export const useTcbsColorStore = create((set, get) => {
+    var _a;
+    // Helper to get the current theme color
+    const getThemeColors = (theme, colors) => {
+        var _a;
+        if (theme === 'light' || theme === 'dark') {
+            return colors[theme];
+        }
+        else {
+            // system: use Appearance API
+            const colorScheme = ((_a = Appearance.getColorScheme) === null || _a === void 0 ? void 0 : _a.call(Appearance)) || 'light';
+            return colors[colorScheme] || colors.light;
+        }
+    };
+    // Initial state
+    const initialColors = defaultColors;
+    const initialTheme = defaultTheme;
+    const initialThemeColors = getThemeColors(initialTheme, initialColors);
+    // Listen to system theme changes if needed
+    if (initialTheme === 'system' && !appearanceListener) {
+        appearanceListener = (_a = Appearance.addChangeListener) === null || _a === void 0 ? void 0 : _a.call(Appearance, ({ colorScheme }) => {
+            set((state) => ({
+                themeColors: state.colors[colorScheme || 'light']
+            }));
+        });
+    }
+    return {
+        colors: initialColors,
+        tcbsTheme: initialTheme,
+        themeColors: initialThemeColors,
+        get currentThemeMode() {
+            var _a;
+            const state = get();
+            if (state.tcbsTheme === 'light' || state.tcbsTheme === 'dark') {
+                return state.tcbsTheme;
+            }
+            // system: use Appearance API
+            const colorScheme = ((_a = Appearance.getColorScheme) === null || _a === void 0 ? void 0 : _a.call(Appearance)) || 'light';
+            return (colorScheme === 'dark' ? 'dark' : 'light');
+        },
+        setTcbsColor: (colors) => {
+            set((state) => {
+                let newColors = Object.assign({}, state.colors);
+                // If colors for both themes are provided
+                if (colors.light || colors.dark) {
+                    if (colors.light) {
+                        newColors.light = Object.assign(Object.assign({}, newColors.light), colors.light);
+                    }
+                    if (colors.dark) {
+                        newColors.dark = Object.assign(Object.assign({}, newColors.dark), colors.dark);
+                    }
+                }
+                else {
+                    // If only one set, update both themes
+                    newColors.light = Object.assign(Object.assign({}, newColors.light), colors);
+                    newColors.dark = Object.assign(Object.assign({}, newColors.dark), colors);
+                }
+                // Update themeColors as well
+                const themeColors = getThemeColors(state.tcbsTheme, newColors);
+                return { colors: newColors, themeColors };
+            });
+        },
+        setTcbsTheme: (newTheme) => {
+            var _a;
+            // Persist user selection
+            storage.set(THEME_KEY, newTheme);
+            // Remove previous listener if exists
+            if (appearanceListener) {
+                appearanceListener.remove();
+                appearanceListener = null;
+            }
+            // If new theme is system, add listener
+            if (newTheme === 'system') {
+                appearanceListener = (_a = Appearance.addChangeListener) === null || _a === void 0 ? void 0 : _a.call(Appearance, ({ colorScheme }) => {
+                    set((state) => ({
+                        themeColors: state.colors[colorScheme || 'light']
+                    }));
+                });
+            }
+            // Update themeColors as well
+            set((state) => ({
+                tcbsTheme: newTheme,
+                themeColors: getThemeColors(newTheme, state.colors)
+            }));
+        },
+        toggleTcbsTheme: () => {
+            set((state) => {
+                const themes = ['light', 'dark', 'system'];
+                const currentIdx = themes.indexOf(state.tcbsTheme);
+                const nextTheme = themes[(currentIdx + 1) % themes.length];
+                // Note: setTcbsTheme is called outside the state update, but here it's called internally
+                // which is a common pattern in zustand actions.
+                // @ts-ignore
+                state.setTcbsTheme(nextTheme);
+                return {};
+            });
+        },
+        // REWRITTEN FUNCTION using hardcoded neutrals for better UI contrast
+        setMazicColor: (baseColor) => {
+            // Determine the best text color for the button based on the base color's brightness
+            // const buttonTextColor = isColorDark(baseColor) ? '#FFFFFF' : '#000000';
+            const buttonTextColor = '#FFFFFF';
+            const secondaryBaseColor = adjustBrightness(baseColor, -10); // A slightly darker shade for accents
+            // --- Light Theme Palette ---
+            const lightColors = {
+                // Primary & Button Colors (baseColor is the accent)
+                btnColor: addAlpha(baseColor, 1),
+                btnBorderColor: baseColor,
+                btnIconColor: buttonTextColor,
+                themeColor: baseColor,
+                btnTextColor: buttonTextColor,
+                tabBarIconActiveColor: buttonTextColor,
+                tabBarIconInactiveColor: addAlpha("#000000", 0.4),
+                // modalBgColor: 80% lighter than baseColor
+                primaryColor: addAlpha(baseColor, 1),
+                secondaryColor: addAlpha(baseColor, 0.7),
+                tertiaryColor: addAlpha(baseColor, 0.1),
+                // Backgrounds (Clean white/near-white neutrals)
+                screenBgColor: addAlpha(baseColor, 0.1),
+                modalBgColor: adjustBrightness(baseColor, 10),
+                modalTitleColor: adjustBrightness(baseColor, 90),
+                modalHeaderBgColor: '#F0F0F0',
+                modalCardBgColor: '#FAFAFA',
+                // Text Colors (High contrast black/dark gray)
+                textPrimary: '#1F1F1F',
+                textSecondary: '#6B7280',
+                // Borders & Dividers (Very subtle grays)
+                borderColor: '#E5E7EB',
+                dividerColor: '#F3F4F6',
+                // Inputs & Cards
+                inputBgColor: '#FFFFFF',
+                inputBorderColor: '#D1D5DB',
+                cardBgColor: '#FFFFFF',
+                cardBorderColor: '#E5E7EB',
+                // Status Colors (Standard, high-contrast semantic colors)
+                accentColor: secondaryBaseColor,
+                errorColor: '#DC2626',
+                successColor: '#16A34A',
+                warningColor: '#F59E0B',
+            };
+            // --- Dark Theme Palette ---
+            const darkColors = {
+                // Primary & Button Colors
+                btnColor: addAlpha(baseColor, 1),
+                btnBorderColor: baseColor,
+                btnIconColor: buttonTextColor,
+                themeColor: baseColor,
+                btnTextColor: buttonTextColor,
+                tabBarIconActiveColor: buttonTextColor,
+                tabBarIconInactiveColor: addAlpha("#000000", 0.4),
+                primaryColor: addAlpha(baseColor, 1),
+                secondaryColor: addAlpha(baseColor, 0.7),
+                tertiaryColor: addAlpha(baseColor, 0.2),
+                // Backgrounds (Clean dark/near-black neutrals)
+                screenBgColor: addAlpha(baseColor, 0.8),
+                modalBgColor: adjustBrightness(baseColor, 80),
+                modalHeaderBgColor: '#1F1F1F',
+                modalCardBgColor: '#2C2C2C',
+                // Text Colors (High contrast white/light gray)
+                textPrimary: '#FFFFFF',
+                textSecondary: '#A0A0A0',
+                // Borders & Dividers (Subtle dark grays)
+                borderColor: '#374151',
+                dividerColor: '#2C2C2C',
+                // Inputs & Cards
+                inputBgColor: '#1F1F1F',
+                inputBorderColor: '#374151',
+                cardBgColor: '#1F1F1F',
+                cardBorderColor: '#374151',
+                // Status Colors (Brighter semantic colors for dark background)
+                accentColor: secondaryBaseColor,
+                errorColor: '#EF4444',
+                successColor: '#22C55E',
+                warningColor: '#FBBF24',
+            };
+            set((state) => {
+                const newColors = {
+                    light: lightColors,
+                    dark: darkColors,
+                };
+                const themeColors = getThemeColors(state.tcbsTheme, newColors);
+                return { colors: newColors, themeColors };
+            });
+        }
+    };
+});

package/package.json

@@ -13,7 +13,7 @@
     "react-native-vector-icons"
   ],
   "author": "TechCraft By Subrata <subraatakumar@gmail.com>",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "publishConfig": {
     "access": "public"
   },
@@ -32,9 +32,13 @@
   },
   "peerDependencies": {
     "react": ">=17.0.0",
-    "react-native": ">=0.68.0",
-    "react-native-vector-icons": ">=10.2.0"
+    "react-native": ">=0.68.0"
   },
+  "dependencies": {
+    "react-native-vector-icons": ">=10.2.0",
+    "react-error-boundary": ">=5.0.0",
+    "@tcbs/react-native-exception-handler": "1.0.0"
+  },  
   "devDependencies": {
     "@types/react": "^17.0.0",
     "@types/react-native": "^0.68.0",

package/src/components/ThemeModal.tsx

@@ -16,7 +16,7 @@ export const ThemeModal: React.FC<ThemeModalProps> = ({ visible, onClose }) => {
   // You can customize these colors or get them from your theme
   const colors = {
     menuCardBkgColor: themeColors.screenBgColor || '#fff',
-    textDark: themeColors.btnTextColor || '#222',
+    textDark: themeColors.modalTitleColor || '#222',
     textGray: '#888',
   };
 
@@ -28,13 +28,14 @@ export const ThemeModal: React.FC<ThemeModalProps> = ({ visible, onClose }) => {
       onRequestClose={onClose}
     >
       <Pressable style={styles.modalOverlay} onPress={onClose}>
-        <Pressable style={[styles.modalCard, { backgroundColor: colors.menuCardBkgColor }]}
+        <Pressable style={[styles.modalCard, { backgroundColor: themeColors.modalBgColor || "#00000080" }]}
           onPress={() => {}} // Prevent closing when pressing inside card
         >
           <View style={styles.modalClose}>
             <TcbsButton
               onPress={onClose}
               iconName="close"
+              iconColor={colors.textDark}
               iconPosition="left"
               variant={BUTTON_VARIANT.NO_BORDER}
               iconSize={22}
@@ -43,7 +44,7 @@ export const ThemeModal: React.FC<ThemeModalProps> = ({ visible, onClose }) => {
             />
           </View>
           <Text style={[styles.modalTitle, { color: colors.textDark }]}>Theme</Text>
-          <Text style={[styles.modalSubtitle, { color: colors.textGray }]}>Choose how the app looks on this device.</Text>
+          <Text style={[styles.modalSubtitle, { color: colors.textDark }]}>Choose how the app looks on this device.</Text>
           <View style={{ marginTop: 18 }}>
             <TcbsButton
               title="Light"
@@ -93,11 +94,11 @@ const styles = StyleSheet.create({
     borderRadius: 16,
     padding: 24,
     alignItems: 'stretch',
-    shadowColor: '#000',
-    shadowOpacity: 0.15,
+    // shadowColor: '#000',
+    // shadowOpacity: 0.15,
     shadowRadius: 12,
-    shadowOffset: { width: 0, height: 4 },
-    elevation: 4,
+    // shadowOffset: { width: 0, height: 4 },
+    // elevation: 4,
   },
   modalClose: {
     position: 'absolute',

package/src/components/error/AppErrorBoundary.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export interface AppErrorBoundaryProps {
+	children?: React.ReactNode;
+}
+
+export interface AppErrorBoundaryState {
+	hasError: boolean;
+	error: any;
+	reactError: {
+		name?: string;
+		message?: string;
+		stack?: string;
+	} | null;
+	errorInfo: {
+		componentStack?: string;
+	} | null;
+}
+
+export class AppErrorBoundary extends React.Component<AppErrorBoundaryProps, AppErrorBoundaryState> {}

package/src/components/error/AppErrorBoundary.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { setupGlobalExceptionHandlers } from './setupGlobalExceptionHandlers';
+
+setupGlobalExceptionHandlers();
+
+export interface AppErrorBoundaryProps {
+  children?: React.ReactNode;
+}
+
+export interface AppErrorBoundaryState {
+  hasError: boolean;
+  error: any;
+  reactError: {
+    name?: string;
+    message?: string;
+    stack?: string;
+  } | null;
+  errorInfo: {
+    componentStack?: string;
+  } | null;
+}
+
+export class AppErrorBoundary extends React.Component<AppErrorBoundaryProps, AppErrorBoundaryState> {
+  state: AppErrorBoundaryState = {
+    hasError: false,
+    error: null,
+    reactError: null,
+    errorInfo: null,
+  };
+
+  static getDerivedStateFromError(error: any) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    // Log exactly what React gives
+    console.log('React Render Error:', error);
+
+    // Store everything needed for UI
+    this.setState({
+      error,
+      reactError: {
+        name: error?.name,
+        message: error?.message,
+        stack: error?.stack,
+      },
+      errorInfo,
+    });
+  }
+
+  renderDevError() {
+    const { error, reactError, errorInfo } = this.state;
+
+    if (!error) return null;
+
+    return (
+      <SafeAreaView style={{ flex: 1 }}>
+        <ScrollView style={styles.container}>
+          <Text style={styles.title}>🚨 Application Error (DEV)</Text>
+
+          {/* 1️⃣ What happened */}
+          <Section title="❌ What happened">
+            <Text style={styles.errorText}>
+              {error.name}: {error.message}
+            </Text>
+          </Section>
+
+          {/* 2️⃣ React render error (same as console.log(error)) */}
+          <Section title="⚛️ React render error">
+            <Text style={styles.mono}>
+              {reactError?.stack}
+            </Text>
+          </Section>
+
+          {/* 3️⃣ Component stack (advanced) */}
+          <Section title="📜 Component stack (Advanced)">
+            <Text style={styles.stack}>
+              {errorInfo?.componentStack}
+            </Text>
+          </Section>
+        </ScrollView>
+      </SafeAreaView>
+    );
+  }
+
+  renderProdError() {
+    return (
+      <View style={styles.prodContainer}>
+        <Text style={styles.prodTitle}>Something went wrong</Text>
+        <Text style={styles.prodSubtitle}>
+          Please restart the application.
+        </Text>
+      </View>
+    );
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return __DEV__ ? this.renderDevError() : this.renderProdError();
+    }
+    return this.props.children;
+  }
+}
+
+/* ---------- Helper Components ---------- */
+
+interface SectionProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+const Section = ({ title, children }: SectionProps) => (
+  <View style={styles.section}>
+    <Text style={styles.sectionTitle}>{title}</Text>
+    {children}
+  </View>
+);
+
+/* ---------- Styles ---------- */
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#0f172a',
+    padding: 16,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#f87171',
+    marginBottom: 12,
+  },
+  section: {
+    marginBottom: 16,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#38bdf8',
+    marginBottom: 6,
+  },
+  errorText: {
+    color: '#fecaca',
+    fontSize: 14,
+  },
+  mono: {
+    fontSize: 12,
+    color: '#e5e7eb',
+    lineHeight: 16,
+  },
+  stack: {
+    fontSize: 11,
+    color: '#94a3b8',
+    lineHeight: 16,
+  },
+  prodContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  prodTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  prodSubtitle: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+  },
+});

package/src/components/error/setupGlobalExceptionHandlers.js

@@ -0,0 +1,41 @@
+import { Alert, Platform } from 'react-native';
+import {
+  setJSExceptionHandler,
+  setNativeExceptionHandler,
+} from '@tcbs/react-native-exception-handler';
+
+/**
+ * JS Exception Handler
+ * This is a LAST-RESORT handler
+ */
+const jsExceptionHandler = (error, isFatal) => {
+  console.log('Global JS Exception:', error);
+
+  if (isFatal) {
+    Alert.alert(
+      'Unexpected error occurred',
+      `${error?.name ? error.name + ': ' : ''}${error?.message || error?.toString?.() || 'Unknown error'}\n\n${error?.stack || ''}`,
+      [{ text: 'OK' }],
+    );
+  }
+};
+
+/**
+ * Native Exception Handler
+ * UI via JS WILL NOT WORK here
+ */
+const nativeExceptionHandler = (exceptionString) => {
+  console.log('Global Native Exception:', exceptionString);
+
+  // Send logs to server / analytics if needed
+};
+
+export const setupGlobalExceptionHandlers = () => {
+  setJSExceptionHandler(jsExceptionHandler, true);
+
+  setNativeExceptionHandler(
+    nativeExceptionHandler,
+    true,  // forceAppQuit (Android)
+    true   // executeDefaultHandler
+  );
+};

package/src/index.ts

@@ -1,4 +1,4 @@
-export { Button } from './components/Button';
+
 export { TcbsButton } from './components/TcbsButton';
 export {
 	BUTTON_SIZE,
@@ -12,4 +12,5 @@ export {
 	IconComponentType,
 } from './components/TcbsButton.types';
 export { useTcbsColorStore } from './store/themeStore';
-export {ThemeModal} from './components/ThemeModal';
+export {ThemeModal} from './components/ThemeModal';
+export {AppErrorBoundary} from './components/error/AppErrorBoundary';

package/src/store/themeStore.ts

@@ -17,13 +17,14 @@ export type ThemeColor = {
   btnTextColor: string;
   tabBarIconActiveColor?: string;
   tabBarIconInactiveColor?: string;
+  modalBgColor?: string;
   primaryColor?: string;
   secondaryColor?: string;
   tertiaryColor?: string;
   screenBgColor?: string;
-  modalBgColor?: string;
   modalHeaderBgColor?: string;
   modalCardBgColor?: string;
+  modalTitleColor?: string;
   textPrimary?: string;
   textSecondary?: string;
   borderColor?: string;
@@ -101,8 +102,14 @@ const rgbToHex = (r: number, g: number, b: number): string => {
 const adjustBrightness = (hex: string, percent: number): string => {
   const rgb = hexToRgb(hex);
   if (!rgb) return hex;
-  
-  const adjust = (value: number) => Math.max(0, Math.min(255, value + (255 * percent / 100)));
+  // percent > 0: lighten, percent < 0: darken
+  const adjust = (value: number) => {
+    if (percent > 0) {
+      return Math.round(value + (255 - value) * (percent / 100));
+    } else {
+      return Math.round(value * (1 + percent / 100));
+    }
+  };
   return rgbToHex(adjust(rgb.r), adjust(rgb.g), adjust(rgb.b));
 };
 
@@ -237,13 +244,15 @@ export const useTcbsColorStore = create<ThemeStore>((set: (fn: (state: ThemeStor
         tabBarIconActiveColor: buttonTextColor,
         tabBarIconInactiveColor: addAlpha("#000000",0.4),
 
+        // modalBgColor: 80% lighter than baseColor
         primaryColor:  addAlpha(baseColor,1),
         secondaryColor: addAlpha(baseColor,0.7),
         tertiaryColor: addAlpha(baseColor,0.1),
 
         // Backgrounds (Clean white/near-white neutrals)
         screenBgColor: addAlpha(baseColor,0.1), // Pure white
-        modalBgColor: addAlpha('#000000', 0.5), // Standard dark overlay
+        modalBgColor: adjustBrightness(baseColor, 10), // 80% lighter tone
+        modalTitleColor: adjustBrightness(baseColor, 90),
         modalHeaderBgColor: '#F0F0F0', // Light gray
         modalCardBgColor: '#FAFAFA', // Off-white for cards/modals
 
@@ -279,13 +288,14 @@ export const useTcbsColorStore = create<ThemeStore>((set: (fn: (state: ThemeStor
 
         tabBarIconActiveColor: buttonTextColor,
         tabBarIconInactiveColor: addAlpha("#000000",0.4),
+
         primaryColor:  addAlpha(baseColor,1),
         secondaryColor: addAlpha(baseColor,0.7),
         tertiaryColor: addAlpha(baseColor,0.2),
 
         // Backgrounds (Clean dark/near-black neutrals)
         screenBgColor: addAlpha(baseColor,0.8), // Very dark gray
-        modalBgColor: addAlpha('#000000', 0.8), // Darker overlay
+        modalBgColor: adjustBrightness(baseColor, 80), // Darker overlay
         modalHeaderBgColor: '#1F1F1F', // Slightly lighter dark gray
         modalCardBgColor: '#2C2C2C', // Medium dark gray for cards/modals
 

package/src/components/Button.tsx

@@ -1,26 +0,0 @@
-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'
-  }
-});