@tcbs/react-native-mazic-ui 0.1.1 → 0.1.3

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,13 +13,13 @@
     "react-native-vector-icons"
   ],
   "author": "TechCraft By Subrata <subraatakumar@gmail.com>",
-  "version": "0.1.1",
-    "publishConfig": {
+  "version": "0.1.3",
+  "publishConfig": {
     "access": "public"
   },
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
-  "types": "lib/types/index.d.ts",
+  "types": "lib/index.d.ts",
   "react-native": "src/index.ts",
   "files": [
     "lib/",
@@ -33,7 +33,9 @@
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-native": ">=0.68.0",
-    "react-native-vector-icons": ">=10.2.0"
+    "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",

package/src/components/TcbsButton.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { Appearance } from 'react-native';
 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';
@@ -33,7 +34,8 @@ const FONT_SIZES: Record<ButtonSize, number> = {
   [BUTTON_SIZE.SMALL]: 14,
 };
 
-const BORDER_RADIUSES: Record<ButtonSize, number> = {
+// Support for BORDER_RADIUS.NONE and BORDER_RADIUS.FULL (50%)
+const BORDER_RADIUSES: Record<ButtonSize, number | string> = {
   [BUTTON_SIZE.LARGE]: BORDER_RADIUS.MEDIUM,
   [BUTTON_SIZE.MEDIUM]: BORDER_RADIUS.SMALL,
   [BUTTON_SIZE.SMALL]: BORDER_RADIUS.SMALL,
@@ -72,25 +74,35 @@ export const TcbsButton: React.FC<TcbsButtonProps> = ({
   accessibilityHint,
   accessibilityRole = 'button',
   accessibilityState,
-  themeColor,
-  screenBgColor,
 }) => {
-  // Use theme from store if not provided as prop
-  const { colors, mode } = useTcbsColorStore();
-  const effectiveThemeColor = themeColor ?? colors[mode];
+  // 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: effectiveThemeColor?.btnColor ?? effectiveThemeColor?.themeColor ?? '#007AFF',
     btnBorderColor: effectiveThemeColor?.btnBorderColor ?? effectiveThemeColor?.btnColor ?? '#007AFF',
     btnIconColor: effectiveThemeColor?.btnIconColor,
-    btnTextColor: effectiveThemeColor?.btnTextColor ?? effectiveThemeColor?.btnTxtColor  ,
+    btnTextColor: effectiveThemeColor?.btnTextColor ?? effectiveThemeColor?.btnTxtColor,
     themeColor: effectiveThemeColor?.themeColor ?? effectiveThemeColor?.btnColor ?? '#007AFF',
   };
 
   const buttonStyle = useMemo<StyleProp<ViewStyle>>(() => {
+    const height = HEIGHTS[size];
+    let computedBorderRadius: number | string;
+    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: ViewStyle = {
-      height: HEIGHTS[size],
-      borderRadius: borderRadius ?? BORDER_RADIUSES[size],
+      height,
+      borderRadius: computedBorderRadius,
       alignItems: 'center',
       justifyContent: 'center',
       opacity: disabled ? 0.6 : 1,
@@ -129,10 +141,20 @@ export const TcbsButton: React.FC<TcbsButtonProps> = ({
   }, [size, variant, normalizedColors, style, disabled, borderRadius]);
 
   const themedTextStyle = useMemo<TextStyle>(() => {
-    const baseTextColor =
-      variant === BUTTON_VARIANT.PRIMARY
+    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'
-        : variant === BUTTON_VARIANT.NO_BORDER && mode === 'dark' ? normalizedColors.btnTextColor || "#FFFFFF" : normalizedColors?.btnColor || normalizedColors?.themeColor || "#FFFFFF";
+        : normalizedColors?.btnColor || '#007AFF';
+    } else {
+      baseTextColor = normalizedColors?.btnColor || '#FFFFFF';
+    }
 
     return {
       color: baseTextColor,
@@ -140,13 +162,13 @@ export const TcbsButton: React.FC<TcbsButtonProps> = ({
       fontWeight: '700',
       ...(textStyle as TextStyle),
     };
-  }, [size, variant, normalizedColors, textStyle]);
+  }, [size, variant, normalizedColors, textStyle, tcbsTheme]);
 
   const renderIcon = (IconComponent: IconComponentType) => (
     <IconComponent
       name={iconName!}
       size={iconSize || FONT_SIZES[size] * 2}
-      color={iconColor || normalizedColors.btnIconColor || themedTextStyle.color}
+      color={iconColor || themedTextStyle.color}
       style={
         iconPosition === 'top'
           ? { marginBottom: 2 }
@@ -230,6 +252,5 @@ export const TcbsButton: React.FC<TcbsButtonProps> = ({
   );
 };
 
-// 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

@@ -17,12 +17,15 @@ export const BUTTON_VARIANT = {
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
   NO_BORDER: 'no_border',
+
 } as const;
 
 export const BORDER_RADIUS = {
   SMALL: 8,
   MEDIUM: 12,
   LARGE: 16,
+  NONE: 0,
+  FULL: '50%',
 } as const;
 
 export type ButtonSize = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];

package/src/components/ThemeModal.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { Modal, Pressable, TouchableOpacity, View, Text, StyleSheet } from 'react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import Entypo from 'react-native-vector-icons/Entypo';
+import { useTcbsColorStore } from '../store/themeStore';
+import { BUTTON_VARIANT, TcbsButton } from './TcbsButton';
+
+export interface ThemeModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+export const ThemeModal: React.FC<ThemeModalProps> = ({ 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 (
+    <Modal
+      transparent={true}
+      animationType="fade"
+      visible={visible}
+      onRequestClose={onClose}
+    >
+      <Pressable style={styles.modalOverlay} onPress={onClose}>
+        <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}
+              accessibilityLabel="Close"
+              style={{ padding: 8, marginRight: 0, minWidth: 0, minHeight: 0, alignSelf: 'flex-end' }}
+            />
+          </View>
+          <Text style={[styles.modalTitle, { color: colors.textDark }]}>Theme</Text>
+          <Text style={[styles.modalSubtitle, { color: colors.textDark }]}>Choose how the app looks on this device.</Text>
+          <View style={{ marginTop: 18 }}>
+            <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' }}
+            />
+            <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' }}
+            />
+            <TcbsButton
+              title="System (default)"
+              onPress={() => setTcbsTheme('system')}
+              variant={tcbsTheme === 'system' ? 'primary' : 'secondary'}
+              iconGroup="Ionicons"
+              iconName="settings"
+              iconPosition="left"
+              textStyle={{ flex: 1, textAlign: 'center' }}
+            />
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
+
+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/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> {}