@tcbs/react-native-mazic-ui 0.1.7 → 0.1.8

package/package.json

@@ -13,7 +13,7 @@
     "react-native-vector-icons"
   ],
   "author": "TechCraft By Subrata <subraatakumar@gmail.com>",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "publishConfig": {
     "access": "public"
   },

package/src/components/CustomCard.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import { View, Text, StyleSheet, ViewStyle, TextStyle, Pressable, GestureResponderEvent } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { useTcbsColorStore } from '../store/themeStore';
+import CustomText from './CustomText';
+
+type CardVariant = 'default' | 'outlined';
+
+interface CustomCardProps {
+  title: string;
+  description?: string;
+  variant?: CardVariant;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+  secureText?: string | null;
+  secureStrapColor?: string;
+  accessibilityLabel?: string;
+  accessibilityRole?: 'button' | 'link' | 'header' | 'image' | 'text' | 'adjustable' | 'search' | 'summary' | 'keyboardkey' | 'none';
+  accessible?: boolean;
+  onPress?: (event: GestureResponderEvent) => void;
+  trailingIcon?: string;
+}
+
+const CustomCard: React.FC<CustomCardProps> = ({
+  title,
+  description,
+  variant = 'default',
+  style,
+  textStyle,
+  onPress,
+  secureText = null,
+  secureStrapColor = null,
+  accessibilityLabel,
+  accessibilityRole,
+  accessible,
+  trailingIcon = 'chevron-forward',
+}) => {
+  const { themeColors: theme } = useTcbsColorStore();
+
+  const getCardStyle = (): ViewStyle => {
+    return variant === 'outlined'
+      ? {
+        backgroundColor: theme.cardBgColor,
+        borderColor: theme.cardBorderColor,
+        borderWidth: 1,
+      }
+      : { backgroundColor: theme.cardBgColor };
+  };
+
+  const Container: any = onPress ? Pressable : View;
+
+  return (
+    <View style={{ width: '100%', marginBottom: 12 }}>
+      <View style={{ overflow: 'hidden' }}>
+        {secureText && (
+          <View style={{ position: 'absolute', zIndex: 3, left: -26, opacity: 1, top: 5, transform: [{ rotate: '-50deg' }] }}>
+            <View style={{ backgroundColor: secureStrapColor || theme.successColor, paddingHorizontal: 20, paddingVertical: 6, borderRadius: 4, elevation: 2 }}>
+              <CustomText variant="caption" style={{ color: theme.card, fontWeight: '600' }}>
+                {secureText}
+              </CustomText>
+            </View>
+          </View>)}
+        <Container
+          onPress={onPress}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityRole={accessibilityRole}
+          accessible={accessible}
+          android_ripple={{ color: theme.warningColor + '22' }}
+          style={({ pressed }: { pressed: boolean }) => [
+            styles.card,
+            getCardStyle(),
+            style,
+            pressed && { opacity: 0.85 },
+          ]}>
+          {/* Decorative accents */}
+          <View
+            style={[
+              styles.accentTopRight,
+              { backgroundColor: theme.warningColor },
+            ]}
+            pointerEvents="none"
+          />
+          <View
+            style={[
+              styles.accentBottomLeft,
+              { backgroundColor: theme.warningColor },
+            ]}
+            pointerEvents="none"
+          />
+
+          <View style={styles.content}>
+            <View style={{ flex: 1 }}>
+              <Text style={[styles.title, { color: theme.textPrimary }, textStyle]}>
+                {title}
+              </Text>
+              {description && (
+                <Text style={[styles.description, { color: theme.textSecondary }]}>
+                  {description}
+                </Text>
+              )}
+            </View>
+
+            {onPress && (
+              <Ionicons
+                name={trailingIcon}
+                size={20}
+                color={theme.textPrimary}
+                style={styles.icon}
+              />
+            )}
+          </View>
+        </Container>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 16,
+    borderRadius: 10,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 14,
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    marginLeft: 12,
+  },
+  accentTopRight: {
+    position: 'absolute',
+    width: 88,
+    height: 88,
+    borderRadius: 44,
+    right: -24,
+    top: -24,
+    opacity: 0.12,
+    transform: [{ rotate: '20deg' }],
+  },
+  accentBottomLeft: {
+    position: 'absolute',
+    width: 140,
+    height: 70,
+    borderTopLeftRadius: 80,
+    borderTopRightRadius: 80,
+    left: -40,
+    bottom: -20,
+    opacity: 0.08,
+    transform: [{ rotate: '-10deg' }],
+  },
+});
+
+export default CustomCard;

package/src/components/CustomText.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {Text, StyleSheet, TextStyle} from 'react-native';
+import { useTcbsColorStore } from '../store/themeStore';
+
+type TextVariant = 'title' | 'subtitle' | 'body' | 'caption' | 'button';
+
+interface CustomTextProps {
+  children: React.ReactNode;
+  variant?: TextVariant;
+  style?: TextStyle;
+}
+
+const CustomText: React.FC<CustomTextProps> = ({
+  children,
+  variant = 'body',
+  style,
+}) => {
+  const { themeColors: theme } = useTcbsColorStore();
+  return (
+    <Text style={[styles[variant], {color: theme.textPrimary}, style]}>
+      {children}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: '600',
+  },
+  body: {
+    fontSize: 16,
+  },
+  caption: {
+    fontSize: 14,
+    color: 'gray',
+  },
+  button: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+  },
+});
+
+export default CustomText;

package/src/index.ts

@@ -13,4 +13,6 @@ export {
 } from './components/TcbsButton.types';
 export { useTcbsColorStore } from './store/themeStore';
 export {ThemeModal} from './components/ThemeModal';
-export {AppErrorBoundary} from './components/error/AppErrorBoundary';
+export {AppErrorBoundary} from './components/error/AppErrorBoundary';
+export {default as TcbsCard} from './components/CustomCard';
+export {default as TcbsText} from './components/CustomText';