@playbasis-ai/qwikcard-sdk 2.3.4

package/dist/components/GradientCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientCard.d.ts","sourceRoot":"","sources":["../../src/components/GradientCard.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAoB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKtE,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,2CA8BlE"}

package/dist/components/GradientCard.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, StyleSheet } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { useTheme } from '../theme/context';
+export function GradientCard({ children, style }) {
+    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 _jsx(View, { style: containerStyle, children: children });
+    }
+    return (_jsx(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: children }));
+}
+const styles = StyleSheet.create({
+    container: {
+        borderWidth: 1,
+        overflow: 'hidden',
+    },
+});

package/dist/components/PointsBalance.d.ts

@@ -0,0 +1,8 @@
+import type { PointBalance } from '../types';
+interface PointsBalanceProps {
+    balances: PointBalance[];
+    style?: object;
+}
+export declare function PointsBalance({ balances, style }: PointsBalanceProps): import("react/jsx-runtime").JSX.Element;
+export default PointsBalance;
+//# sourceMappingURL=PointsBalance.d.ts.map

package/dist/components/PointsBalance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointsBalance.d.ts","sourceRoot":"","sources":["../../src/components/PointsBalance.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,kBAAkB,2CAqCpE;AAwED,eAAe,aAAa,CAAC"}

package/dist/components/PointsBalance.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+import { GradientCard } from './GradientCard';
+import { useTheme } from '../theme/context';
+export function PointsBalance({ balances, style }) {
+    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 (_jsxs(GradientCard, { style: [styles.card, style], children: [_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: styles.label, children: "CURRENT BALANCE" }), _jsx(Text, { style: styles.brand, children: "QwikCard" })] }), _jsxs(View, { style: styles.mainContent, children: [_jsx(Text, { style: styles.currencySymbol, children: "$" }), _jsx(Text, { style: styles.amount, children: formattedBalance })] }), _jsxs(View, { style: styles.footer, children: [secondaryBalance && (_jsx(View, { style: styles.chip, children: _jsxs(Text, { style: styles.chipText, children: ["+ ", secondaryBalance] }) })), _jsxs(View, { style: styles.dots, children: [_jsx(View, { style: [styles.dot, { backgroundColor: '#FFD700' }] }), _jsx(View, { style: [styles.dot, { backgroundColor: '#FF69B4' }] })] })] })] }));
+}
+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/dist/components/ProgressBar.d.ts

@@ -0,0 +1,8 @@
+interface ProgressBarProps {
+    label?: string;
+    value: number;
+    color?: string;
+}
+export declare function ProgressBar({ label, value, color }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/components/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CAyBpE"}

package/dist/components/ProgressBar.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../theme/context';
+export function ProgressBar({ label, value, color }) {
+    const theme = useTheme();
+    const barColor = color || theme.colors.primary;
+    return (_jsxs(View, { style: styles.container, children: [label && (_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: [styles.label, { color: theme.colors.text.primary }], children: label }), _jsxs(Text, { style: [styles.value, { color: theme.colors.text.secondary }], children: [value, "%"] })] })), _jsx(View, { style: [styles.track, { backgroundColor: 'rgba(148, 163, 184, 0.2)' }], children: _jsx(View, { style: [
+                        styles.fill,
+                        {
+                            width: `${value}%`,
+                            backgroundColor: barColor,
+                        },
+                    ] }) })] }));
+}
+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/dist/components/QuestProgress.d.ts

@@ -0,0 +1,10 @@
+import type { Quest } from '../types';
+interface QuestProgressProps {
+    quest: Quest;
+    primaryColor?: string;
+    backgroundColor?: string;
+    style?: object;
+}
+export declare function QuestProgress({ quest, primaryColor, backgroundColor, style, }: QuestProgressProps): import("react/jsx-runtime").JSX.Element;
+export default QuestProgress;
+//# sourceMappingURL=QuestProgress.d.ts.map

package/dist/components/QuestProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestProgress.d.ts","sourceRoot":"","sources":["../../src/components/QuestProgress.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAMtC,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,YAAwB,EACxB,eAA2B,EAC3B,KAAK,GACN,EAAE,kBAAkB,2CA8CpB;AAiFD,eAAe,aAAa,CAAC"}

package/dist/components/QuestProgress.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+export function QuestProgress({ quest, primaryColor = '#6366F1', backgroundColor = '#E5E7EB', style, }) {
+    const progressPercent = quest.target > 0 ? (quest.progress / quest.target) * 100 : 0;
+    const isCompleted = quest.status === 'completed';
+    return (_jsxs(View, { style: [styles.container, style], children: [_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: styles.name, children: quest.name }), isCompleted && _jsx(Text, { style: styles.completedBadge, children: "\u2713" })] }), _jsx(Text, { style: styles.description, children: quest.description }), _jsx(View, { style: [styles.progressBar, { backgroundColor }], children: _jsx(View, { style: [
+                        styles.progressFill,
+                        {
+                            backgroundColor: isCompleted ? '#10B981' : primaryColor,
+                            width: `${Math.min(progressPercent, 100)}%`,
+                        },
+                    ] }) }), _jsxs(View, { style: styles.footer, children: [_jsxs(Text, { style: styles.progressText, children: [quest.progress, " / ", quest.target] }), _jsxs(Text, { style: styles.percentText, children: [Math.round(progressPercent), "%"] })] }), quest.rewards && quest.rewards.length > 0 && (_jsxs(View, { style: styles.rewards, children: [_jsx(Text, { style: styles.rewardLabel, children: "Rewards:" }), quest.rewards.map((reward, idx) => (_jsxs(Text, { style: styles.rewardText, children: [reward.type === 'points' && `${reward.amount} ${reward.currency}`, reward.type === 'badge' && `🏅 Badge`, reward.type === 'reward' && `🎁 Reward`] }, idx)))] }))] }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// 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/dist/components/RadialGauge.d.ts

@@ -0,0 +1,8 @@
+interface RadialGaugeProps {
+    value: number;
+    max: number;
+    label: string;
+}
+export declare function RadialGauge({ value, max, label }: RadialGaugeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RadialGauge.d.ts.map

package/dist/components/RadialGauge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGauge.d.ts","sourceRoot":"","sources":["../../src/components/RadialGauge.tsx"],"names":[],"mappings":"AAOA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CAgDlE"}

package/dist/components/RadialGauge.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, StyleSheet, Text } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { useTheme } from '../theme/context';
+import { GradientCard } from './GradientCard';
+export function RadialGauge({ value, max, label }) {
+    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 (_jsx(GradientCard, { style: styles.container, children: _jsxs(View, { style: styles.content, children: [_jsxs(View, { style: styles.gaugeContainer, children: [_jsxs(Svg, { height: size, width: size, style: { transform: [{ rotate: '-90deg' }] }, children: [_jsx(Circle, { stroke: "rgba(255,255,255,0.1)", strokeWidth: stroke, fill: "transparent", r: radius, cx: size / 2, cy: size / 2 }), _jsx(Circle, { stroke: "#FFD700", strokeWidth: stroke, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: strokeDashoffset, strokeLinecap: "round", fill: "transparent", r: radius, cx: size / 2, cy: size / 2 })] }), _jsx(View, { style: styles.centerText, children: _jsxs(Text, { style: styles.percentText, children: [percentage, "%"] }) })] }), _jsxs(View, { style: styles.infoContainer, children: [_jsx(Text, { style: [styles.label, { color: theme.colors.text.primary }], children: label }), _jsxs(Text, { style: [styles.subText, { color: theme.colors.text.secondary }], children: ["$", value, " of $", max, " saved."] })] })] }) }));
+}
+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,
+    },
+});

package/dist/components/RewardCard.d.ts

@@ -0,0 +1,10 @@
+import type { Reward } from '../types';
+interface RewardCardProps {
+    reward: Reward;
+    onRedeem?: () => void;
+    disabled?: boolean;
+    style?: object;
+}
+export declare function RewardCard({ reward, onRedeem, disabled, style }: RewardCardProps): import("react/jsx-runtime").JSX.Element;
+export default RewardCard;
+//# sourceMappingURL=RewardCard.d.ts.map

package/dist/components/RewardCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RewardCard.d.ts","sourceRoot":"","sources":["../../src/components/RewardCard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMvC,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAgB,EAAE,KAAK,EAAE,EAAE,eAAe,2CA6CxF;AAsDD,eAAe,UAAU,CAAC"}

package/dist/components/RewardCard.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, Image, StyleSheet } from 'react-native';
+import { GradientCard } from './GradientCard';
+import { Button } from './Button';
+import { useTheme } from '../theme/context';
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+export function RewardCard({ reward, onRedeem, disabled = false, style }) {
+    const theme = useTheme();
+    const isAvailable = reward.available && !disabled;
+    return (_jsxs(GradientCard, { style: [styles.container, style], children: [reward.imageUrl ? (_jsx(Image, { source: { uri: reward.imageUrl }, style: styles.image, resizeMode: "cover" })) : (_jsx(View, { style: [styles.imagePlaceholder, { backgroundColor: 'rgba(255, 69, 0, 0.1)' }], children: _jsx(Text, { style: styles.placeholderText, children: "\uD83C\uDF81" }) })), _jsxs(View, { style: styles.content, children: [_jsx(Text, { style: [styles.name, { color: theme.colors.text.primary }], children: reward.name }), _jsx(Text, { style: [styles.description, { color: theme.colors.text.secondary }], numberOfLines: 2, children: reward.description }), _jsxs(View, { style: styles.footer, children: [_jsxs(View, { style: styles.cost, children: [_jsx(Text, { style: [styles.costAmount, { color: theme.colors.text.primary }], children: reward.cost }), _jsx(Text, { style: [styles.costCurrency, { color: theme.colors.text.secondary }], children: reward.currency })] }), onRedeem && (_jsx(Button, { title: isAvailable ? 'Redeem' : 'Unavailable', onPress: onRedeem, variant: isAvailable ? 'primary' : 'secondary', style: { opacity: isAvailable ? 1 : 0.6 } }))] })] })] }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+const styles = StyleSheet.create({
+    container: {
+        marginVertical: 8,
+    },
+    image: {
+        width: '100%',
+        height: 140,
+    },
+    imagePlaceholder: {
+        width: '100%',
+        height: 140,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    placeholderText: {
+        fontSize: 48,
+    },
+    content: {
+        padding: 16,
+    },
+    name: {
+        fontSize: 18,
+        fontWeight: '700',
+        marginBottom: 4,
+    },
+    description: {
+        fontSize: 14,
+        marginBottom: 16,
+    },
+    footer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    cost: {
+        flexDirection: 'row',
+        alignItems: 'baseline',
+    },
+    costAmount: {
+        fontSize: 20,
+        fontWeight: '800',
+    },
+    costCurrency: {
+        fontSize: 12,
+        marginLeft: 4,
+    },
+});
+export default RewardCard;

package/dist/components/RulesModal.d.ts

@@ -0,0 +1,7 @@
+interface RulesModalProps {
+    visible: boolean;
+    onClose: () => void;
+}
+export declare function RulesModal({ visible, onClose }: RulesModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RulesModal.d.ts.map

package/dist/components/RulesModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RulesModal.d.ts","sourceRoot":"","sources":["../../src/components/RulesModal.tsx"],"names":[],"mappings":"AAcA,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,eAAe,2CAwE/D"}

package/dist/components/RulesModal.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, View, Text, StyleSheet, ScrollView, TouchableOpacity, SafeAreaView, } from 'react-native';
+import { useTheme } from '../theme/context';
+import { GradientCard } from './GradientCard';
+export function RulesModal({ visible, onClose }) {
+    const theme = useTheme();
+    const rules = [
+        { icon: '🛍️', title: 'Spend & Earn', desc: 'Earn 1 XP for every $5 spent on your QwikCard.' },
+        { icon: '🧾', title: 'Pay Bills', desc: 'Get +50 XP and 1 Qwik Coin for every bill paid.' },
+        {
+            icon: '🔥',
+            title: 'Streaks',
+            desc: 'Maintain a daily login streak for massive XP milestones.',
+        },
+        {
+            icon: '🤝',
+            title: 'Refer Friends',
+            desc: 'Earn +500 XP and 5 Qwik Coins when friends activate.',
+        },
+        { icon: '📊', title: 'Credit Checks', desc: 'Check your credit score weekly to earn +50 XP.' },
+        {
+            icon: '💡',
+            title: 'Financial Literacy',
+            desc: 'Complete quizzes to earn +100 XP per lesson.',
+        },
+    ];
+    return (_jsx(Modal, { visible: visible, animationType: "slide", transparent: true, onRequestClose: onClose, children: _jsx(View, { style: styles.overlay, children: _jsx(SafeAreaView, { style: styles.safeArea, children: _jsxs(View, { style: [styles.container, { backgroundColor: theme.colors.background }], children: [_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: [styles.title, { color: theme.colors.text.primary }], children: "How to Play" }), _jsx(TouchableOpacity, { onPress: onClose, style: styles.closeButton, children: _jsx(Text, { style: { fontSize: 24, color: theme.colors.text.secondary }, children: "\u2715" }) })] }), _jsxs(ScrollView, { contentContainerStyle: styles.scrollContent, children: [_jsx(Text, { style: [styles.subtitle, { color: theme.colors.text.secondary }], children: "Level up your financial future by building healthy habits. Here is how you earn rewards:" }), rules.map((rule, index) => (_jsx(GradientCard, { style: styles.ruleCard, children: _jsxs(View, { style: styles.ruleRow, children: [_jsx(View, { style: styles.iconContainer, children: _jsx(Text, { style: { fontSize: 24 }, children: rule.icon }) }), _jsxs(View, { style: styles.textContainer, children: [_jsx(Text, { style: [styles.ruleTitle, { color: theme.colors.text.primary }], children: rule.title }), _jsx(Text, { style: [styles.ruleDesc, { color: theme.colors.text.secondary }], children: rule.desc })] })] }) }, index))), _jsx(TouchableOpacity, { onPress: onClose, style: [styles.actionButton, { backgroundColor: theme.colors.primary }], children: _jsx(Text, { style: styles.actionButtonText, children: "Got it!" }) })] })] }) }) }) }));
+}
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.85)',
+    },
+    safeArea: {
+        flex: 1,
+        justifyContent: 'flex-end',
+    },
+    container: {
+        borderTopLeftRadius: 32,
+        borderTopRightRadius: 32,
+        height: '90%',
+        padding: 24,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '900',
+    },
+    closeButton: {
+        padding: 8,
+    },
+    scrollContent: {
+        paddingBottom: 40,
+    },
+    subtitle: {
+        fontSize: 14,
+        lineHeight: 20,
+        marginBottom: 24,
+    },
+    ruleCard: {
+        padding: 16,
+        marginBottom: 12,
+        borderRadius: 20,
+    },
+    ruleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    iconContainer: {
+        width: 48,
+        height: 48,
+        borderRadius: 14,
+        backgroundColor: 'rgba(255, 255, 255, 0.05)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 16,
+    },
+    textContainer: {
+        flex: 1,
+    },
+    ruleTitle: {
+        fontSize: 16,
+        fontWeight: '700',
+        marginBottom: 2,
+    },
+    ruleDesc: {
+        fontSize: 12,
+        lineHeight: 16,
+    },
+    actionButton: {
+        marginTop: 24,
+        padding: 18,
+        borderRadius: 18,
+        alignItems: 'center',
+    },
+    actionButtonText: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: '800',
+    },
+});

package/dist/hooks/useBadges.d.ts

@@ -0,0 +1,12 @@
+import type { Badge } from '../types';
+interface UseBadgesReturn {
+    badges: Badge[];
+    earnedBadges: Badge[];
+    allBadges: Badge[];
+    loading: boolean;
+    error: Error | null;
+    refresh: () => Promise<void>;
+}
+export declare function useBadges(): UseBadgesReturn;
+export default useBadges;
+//# sourceMappingURL=useBadges.d.ts.map

package/dist/hooks/useBadges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBadges.d.ts","sourceRoot":"","sources":["../../src/hooks/useBadges.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEtC,UAAU,eAAe;IACvB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,EAAE,KAAK,EAAE,CAAC;IACtB,SAAS,EAAE,KAAK,EAAE,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,wBAAgB,SAAS,IAAI,eAAe,CA0C3C;AAED,eAAe,SAAS,CAAC"}

package/dist/hooks/useBadges.js

@@ -0,0 +1,42 @@
+import { useState, useEffect, useCallback } from 'react';
+import { usePlaybasis } from '../PlaybasisProvider';
+export function useBadges() {
+    const { client, playerId } = usePlaybasis();
+    const [badges, setBadges] = useState([]);
+    const [allBadges, setAllBadges] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const fetchBadges = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            // Fetch all available badges
+            const all = await client.getBadges();
+            setAllBadges(all);
+            // Fetch player's earned badges
+            if (playerId) {
+                const playerBadges = await client.getPlayerBadges(playerId);
+                setBadges(playerBadges);
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error('Failed to fetch badges'));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client, playerId]);
+    useEffect(() => {
+        fetchBadges();
+    }, [fetchBadges]);
+    const earnedBadges = badges.filter((b) => b.isEarned);
+    return {
+        badges,
+        earnedBadges,
+        allBadges,
+        loading,
+        error,
+        refresh: fetchBadges,
+    };
+}
+export default useBadges;

package/dist/hooks/usePoints.d.ts

@@ -0,0 +1,13 @@
+import type { PointBalance, Currency } from '../types';
+interface UsePointsReturn {
+    balances: PointBalance[];
+    xp: number;
+    qwikCoins: number;
+    loading: boolean;
+    error: Error | null;
+    refresh: () => Promise<void>;
+    earn: (currency: Currency, amount: number, reason?: string) => Promise<PointBalance | null>;
+}
+export declare function usePoints(): UsePointsReturn;
+export default usePoints;
+//# sourceMappingURL=usePoints.d.ts.map

package/dist/hooks/usePoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePoints.d.ts","sourceRoot":"","sources":["../../src/hooks/usePoints.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEvD,UAAU,eAAe;IACvB,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;CAC7F;AAED,wBAAgB,SAAS,IAAI,eAAe,CAyE3C;AAED,eAAe,SAAS,CAAC"}