@playbasis-ai/qwikcard-sdk 2.3.4

package/src/components/BadgeIcon.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+
+import type { Badge } from '../types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Props
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface BadgeIconProps {
+  badge: Badge;
+  size?: 'small' | 'medium' | 'large';
+  showName?: boolean;
+  style?: object;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function BadgeIcon({ badge, size = 'medium', showName = true, style }: BadgeIconProps) {
+  const dimensions = {
+    small: 40,
+    medium: 60,
+    large: 80,
+  };
+
+  const iconSize = dimensions[size];
+  const isEarned = badge.isEarned;
+
+  return (
+    <View style={[styles.container, style]}>
+      <View
+        style={[
+          styles.iconContainer,
+          {
+            width: iconSize,
+            height: iconSize,
+            borderRadius: iconSize / 2,
+            opacity: isEarned ? 1 : 0.4,
+          },
+        ]}
+      >
+        {badge.imageUrl ? (
+          <Image
+            source={{ uri: badge.imageUrl }}
+            style={{ width: iconSize - 8, height: iconSize - 8, borderRadius: (iconSize - 8) / 2 }}
+            resizeMode="cover"
+          />
+        ) : (
+          <Text style={{ fontSize: iconSize / 2 }}>🏅</Text>
+        )}
+      </View>
+
+      {showName && (
+        <Text style={[styles.name, { color: isEarned ? '#1F2937' : '#9CA3AF' }]} numberOfLines={2}>
+          {badge.name}
+        </Text>
+      )}
+
+      {isEarned && badge.earnedAt && (
+        <Text style={styles.earnedDate}>{new Date(badge.earnedAt).toLocaleDateString()}</Text>
+      )}
+    </View>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    padding: 8,
+    width: 80,
+  },
+  iconContainer: {
+    backgroundColor: '#F3F4F6',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  name: {
+    fontSize: 11,
+    fontWeight: '500',
+    textAlign: 'center',
+    marginTop: 4,
+  },
+  earnedDate: {
+    fontSize: 9,
+    color: '#9CA3AF',
+    marginTop: 2,
+  },
+});
+
+export default BadgeIcon;

package/src/components/Button.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet, ViewStyle } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+import { useTheme } from '../theme/context';
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary';
+  style?: ViewStyle;
+}
+
+export function Button({ title, onPress, variant = 'primary', style }: ButtonProps) {
+  const theme = useTheme();
+
+  if (variant === 'secondary') {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        style={[
+          styles.container,
+          {
+            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+            borderColor: theme.colors.surface,
+            borderWidth: 1,
+            borderRadius: theme.borderRadius.m,
+          },
+          style,
+        ]}
+      >
+        <Text style={[styles.text, { color: theme.colors.text.primary }]}>{title}</Text>
+      </TouchableOpacity>
+    );
+  }
+
+  // Primary variant with gradient
+  return (
+    <TouchableOpacity onPress={onPress} style={[styles.touchable, style]}>
+      <LinearGradient
+        colors={theme.colors.gradients.button}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        style={[styles.container, { borderRadius: theme.borderRadius.m }]}
+      >
+        <Text style={[styles.text, { color: theme.colors.text.onPrimary }]}>{title}</Text>
+      </LinearGradient>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  touchable: {
+    shadowColor: '#FF4500',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  container: {
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 14,
+    fontWeight: '700',
+  },
+});

package/src/components/GradientCard.tsx

@@ -0,0 +1,49 @@
+import React, { ReactNode } from 'react';
+import { View, StyleSheet, ViewStyle, StyleProp } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+import { useTheme } from '../theme/context';
+
+interface GradientCardProps {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function GradientCard({ children, style }: GradientCardProps) {
+  const theme = useTheme();
+  const isGradientAvailable =
+    LinearGradient !== undefined &&
+    LinearGradient !== null &&
+    (typeof LinearGradient === 'function' || typeof LinearGradient === 'object');
+
+  const containerStyle = [
+    styles.container,
+    {
+      borderRadius: theme.borderRadius.l,
+      borderColor: theme.colors.surface,
+    },
+    style,
+  ];
+
+  if (!isGradientAvailable) {
+    return <View style={containerStyle}>{children}</View>;
+  }
+
+  return (
+    <LinearGradient
+      colors={['rgba(255, 255, 255, 0.12)', 'rgba(255, 255, 255, 0.04)']}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      style={containerStyle}
+    >
+      {children}
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+});

package/src/components/PointsBalance.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import { GradientCard } from './GradientCard';
+import { useTheme } from '../theme/context';
+import type { PointBalance } from '../types';
+
+interface PointsBalanceProps {
+  balances: PointBalance[];
+  style?: object;
+}
+
+export function PointsBalance({ balances, style }: PointsBalanceProps) {
+  const theme = useTheme();
+
+  // Find primary and secondary currencies
+  const primary = balances.find((b) => b.currency === 'qwik-coins') || balances[0];
+  const secondary = balances.find((b) => b.currency !== primary?.currency);
+
+  const formattedBalance = primary?.balance.toLocaleString() || '0';
+  const secondaryBalance = secondary
+    ? `${secondary.balance.toLocaleString()} ${secondary.currency}`
+    : null;
+
+  return (
+    <GradientCard style={[styles.card, style]}>
+      <View style={styles.header}>
+        <Text style={styles.label}>CURRENT BALANCE</Text>
+        <Text style={styles.brand}>QwikCard</Text>
+      </View>
+
+      <View style={styles.mainContent}>
+        <Text style={styles.currencySymbol}>$</Text>
+        <Text style={styles.amount}>{formattedBalance}</Text>
+      </View>
+
+      <View style={styles.footer}>
+        {secondaryBalance && (
+          <View style={styles.chip}>
+            <Text style={styles.chipText}>+ {secondaryBalance}</Text>
+          </View>
+        )}
+        <View style={styles.dots}>
+          <View style={[styles.dot, { backgroundColor: '#FFD700' }]} />
+          <View style={[styles.dot, { backgroundColor: '#FF69B4' }]} />
+        </View>
+      </View>
+    </GradientCard>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 20,
+    minHeight: 150,
+    justifyContent: 'space-between',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  label: {
+    color: 'rgba(255, 255, 255, 0.8)',
+    fontSize: 10,
+    fontWeight: '700',
+    letterSpacing: 1.2,
+  },
+  brand: {
+    color: '#FFFFFF',
+    fontSize: 12,
+    fontWeight: '800',
+    fontStyle: 'italic',
+  },
+  mainContent: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  currencySymbol: {
+    color: 'rgba(255, 255, 255, 0.9)',
+    fontSize: 20,
+    fontWeight: '600',
+    marginTop: 2,
+    marginRight: 4,
+  },
+  amount: {
+    color: '#FFFFFF',
+    fontSize: 32,
+    fontWeight: '800',
+    letterSpacing: -0.5,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 16,
+  },
+  chip: {
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 16,
+  },
+  chipText: {
+    color: '#FFFFFF',
+    fontSize: 11,
+    fontWeight: '600',
+  },
+  dots: {
+    flexDirection: 'row',
+    gap: 5,
+  },
+  dot: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    opacity: 0.8,
+  },
+});
+
+export default PointsBalance;

package/src/components/ProgressBar.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import { useTheme } from '../theme/context';
+
+interface ProgressBarProps {
+  label?: string;
+  value: number; // 0-100
+  color?: string;
+}
+
+export function ProgressBar({ label, value, color }: ProgressBarProps) {
+  const theme = useTheme();
+  const barColor = color || theme.colors.primary;
+
+  return (
+    <View style={styles.container}>
+      {label && (
+        <View style={styles.header}>
+          <Text style={[styles.label, { color: theme.colors.text.primary }]}>{label}</Text>
+          <Text style={[styles.value, { color: theme.colors.text.secondary }]}>{value}%</Text>
+        </View>
+      )}
+      <View style={[styles.track, { backgroundColor: 'rgba(148, 163, 184, 0.2)' }]}>
+        <View
+          style={[
+            styles.fill,
+            {
+              width: `${value}%`,
+              backgroundColor: barColor,
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    marginVertical: 4,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 6,
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  value: {
+    fontSize: 12,
+  },
+  track: {
+    height: 8,
+    borderRadius: 999,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    borderRadius: 999,
+  },
+});

package/src/components/QuestProgress.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import type { Quest } from '../types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Props
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface QuestProgressProps {
+  quest: Quest;
+  primaryColor?: string;
+  backgroundColor?: string;
+  style?: object;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function QuestProgress({
+  quest,
+  primaryColor = '#6366F1',
+  backgroundColor = '#E5E7EB',
+  style,
+}: QuestProgressProps) {
+  const progressPercent = quest.target > 0 ? (quest.progress / quest.target) * 100 : 0;
+  const isCompleted = quest.status === 'completed';
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.header}>
+        <Text style={styles.name}>{quest.name}</Text>
+        {isCompleted && <Text style={styles.completedBadge}>✓</Text>}
+      </View>
+
+      <Text style={styles.description}>{quest.description}</Text>
+
+      <View style={[styles.progressBar, { backgroundColor }]}>
+        <View
+          style={[
+            styles.progressFill,
+            {
+              backgroundColor: isCompleted ? '#10B981' : primaryColor,
+              width: `${Math.min(progressPercent, 100)}%`,
+            },
+          ]}
+        />
+      </View>
+
+      <View style={styles.footer}>
+        <Text style={styles.progressText}>
+          {quest.progress} / {quest.target}
+        </Text>
+        <Text style={styles.percentText}>{Math.round(progressPercent)}%</Text>
+      </View>
+
+      {quest.rewards && quest.rewards.length > 0 && (
+        <View style={styles.rewards}>
+          <Text style={styles.rewardLabel}>Rewards:</Text>
+          {quest.rewards.map((reward, idx) => (
+            <Text key={idx} style={styles.rewardText}>
+              {reward.type === 'points' && `${reward.amount} ${reward.currency}`}
+              {reward.type === 'badge' && `🏅 Badge`}
+              {reward.type === 'reward' && `🎁 Reward`}
+            </Text>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 16,
+    marginVertical: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  name: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+  },
+  completedBadge: {
+    fontSize: 18,
+    color: '#10B981',
+  },
+  description: {
+    fontSize: 14,
+    color: '#6B7280',
+    marginBottom: 12,
+  },
+  progressBar: {
+    height: 8,
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 4,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 8,
+  },
+  progressText: {
+    fontSize: 12,
+    color: '#6B7280',
+  },
+  percentText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#1F2937',
+  },
+  rewards: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: '#E5E7EB',
+  },
+  rewardLabel: {
+    fontSize: 12,
+    color: '#6B7280',
+    marginRight: 8,
+  },
+  rewardText: {
+    fontSize: 12,
+    color: '#1F2937',
+    marginRight: 8,
+  },
+});
+
+export default QuestProgress;

package/src/components/RadialGauge.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+
+import { useTheme } from '../theme/context';
+import { GradientCard } from './GradientCard';
+
+interface RadialGaugeProps {
+  value: number;
+  max: number;
+  label: string;
+}
+
+export function RadialGauge({ value, max, label }: RadialGaugeProps) {
+  const theme = useTheme();
+  const size = 80;
+  const stroke = 6;
+  const radius = size / 2 - stroke;
+  const circumference = radius * 2 * Math.PI;
+  const strokeDashoffset = circumference - (value / max) * circumference;
+
+  const percentage = Math.round((value / max) * 100);
+
+  return (
+    <GradientCard style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.gaugeContainer}>
+          <Svg height={size} width={size} style={{ transform: [{ rotate: '-90deg' }] }}>
+            <Circle
+              stroke="rgba(255,255,255,0.1)"
+              strokeWidth={stroke}
+              fill="transparent"
+              r={radius}
+              cx={size / 2}
+              cy={size / 2}
+            />
+            <Circle
+              stroke="#FFD700"
+              strokeWidth={stroke}
+              strokeDasharray={`${circumference} ${circumference}`}
+              strokeDashoffset={strokeDashoffset}
+              strokeLinecap="round"
+              fill="transparent"
+              r={radius}
+              cx={size / 2}
+              cy={size / 2}
+            />
+          </Svg>
+          <View style={styles.centerText}>
+            <Text style={styles.percentText}>{percentage}%</Text>
+          </View>
+        </View>
+        <View style={styles.infoContainer}>
+          <Text style={[styles.label, { color: theme.colors.text.primary }]}>{label}</Text>
+          <Text style={[styles.subText, { color: theme.colors.text.secondary }]}>
+            ${value} of ${max} saved.
+          </Text>
+        </View>
+      </View>
+    </GradientCard>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    marginBottom: 16,
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  gaugeContainer: {
+    position: 'relative',
+    width: 80,
+    height: 80,
+  },
+  centerText: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  percentText: {
+    fontSize: 16,
+    fontWeight: '800',
+    color: 'white',
+  },
+  infoContainer: {
+    flex: 1,
+    marginLeft: 16,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '700',
+    marginBottom: 2,
+  },
+  subText: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
+});