@devtravelcode/widget-native 1.0.0

package/LICENSE

@@ -0,0 +1,18 @@
+PROPRIETARY SOFTWARE LICENSE
+
+Copyright (c) 2026 TravelHub. All rights reserved.
+
+This software is proprietary and confidential.
+
+Permission is granted solely to authorized licensees to use this package
+in their applications, subject to a valid license agreement with TravelHub.
+
+The following actions are strictly prohibited without prior written consent:
+- Copying, modifying, or distributing this software
+- Reverse engineering, decompiling, or disassembling
+- Sublicensing, selling, or transferring to third parties
+- Using this software without a valid API token issued by TravelHub
+
+This software is provided "as is" without warranty of any kind.
+
+For licensing inquiries: support@travel-code.com

package/dist/App.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type AppProps = {
+    lang: string;
+    currency: string;
+    onFlightSelect?: (flight: any) => void;
+    onHotelSelect?: (hotel: any) => void;
+    onCarSelect?: (car: any) => void;
+};
+declare const App: React.FC<AppProps>;
+export default App;

package/dist/App.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useMemo } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useWidget } from "./context/WidgetContext";
+import { Navbar } from "./modules/navbar/Navbar";
+import { defaultTranslations } from "./locales/widgetTranslations";
+import FlightSearchForm from "./modules/search-form/flight/FlightSearchForm";
+import FlightResults from "./modules/search-form/flight/flight-results/FlightResults";
+import { FlightFilters } from "./modules/search-form/flight/flight-filters";
+import FlightsSkeleton from "./modules/search-form/flight/flight-results/FlightsSkeleton";
+import ProvidersLoader from "./modules/search-form/flight/flight-results/ProvidersLoader";
+import { useFlightSearch } from "./modules/hooks/useFlightSearch";
+import HotelSearchForm from "./modules/search-form/hotel/HotelSearchForm";
+import HotelResults from "./modules/search-form/hotel/HotelResults";
+import { useHotelSearchSSE } from "./modules/hooks/useHotelSearchSSE";
+import CarSearchForm from "./modules/search-form/cars/CarSearchForm";
+import CarResults from "./modules/search-form/cars/CarResults";
+import { useCarOffers } from "./modules/hooks/useCarOffers";
+import { useCarFilters } from "./modules/search-form/cars/car-filters/useCarFilters";
+import { useSearchExpiration } from "./modules/hooks/useSearchExpiration";
+import { Colors, Spacing, FontSize } from "./theme/colors";
+const ITEMS_PER_PAGE_CAR = 10;
+const App = ({ lang, currency, onFlightSelect, onHotelSelect, onCarSelect }) => {
+    const { config, colors } = useWidget();
+    const isPreview = config?.mode === "preview";
+    const appLang = (config?.form?.language || lang || "en").toLowerCase();
+    const appCurrency = config?.form?.currency || currency || "USD";
+    const [translations, setTranslations] = useState(defaultTranslations[appLang] || defaultTranslations.en);
+    useEffect(() => {
+        setTranslations(defaultTranslations[appLang] || defaultTranslations.en);
+    }, [appLang]);
+    const [activeTab, setActiveTab] = useState("");
+    useEffect(() => {
+        const tabMap = {
+            flights: "avia",
+            hotels: "hotel",
+            cars: "car",
+        };
+        const allTabs = ["flights", "hotels", "cars"];
+        const visible = { ...config?.tabs_visibility, car: false };
+        const firstVisible = allTabs.find((t) => visible[tabMap[t]] !== false);
+        if (firstVisible && activeTab !== firstVisible) {
+            setActiveTab(firstVisible);
+        }
+    }, [config]);
+    const defaultTexts = {
+        flight: "Find the Cheapest Flights",
+        hotel: "Book Your Ideal Hotel",
+        car: "Search and rent cars",
+    };
+    const getBannerText = () => {
+        const t = config?.texts || {};
+        if (activeTab === "flights")
+            return t.banner_flight ?? defaultTexts.flight;
+        if (activeTab === "hotels")
+            return t.banner_hotel ?? defaultTexts.hotel;
+        if (activeTab === "cars")
+            return t.banner_car ?? defaultTexts.car;
+        return "";
+    };
+    const showHeadings = config?.texts?.headings_visible !== false;
+    const { results: flightResults, filtersData, airlinesData, dictionaries, currencySign, loading: flightLoading, isFiltering: flightIsFiltering, isPageLoading: flightIsPageLoading, error: flightError, status: flightStatus, total: flightTotal, limit: flightLimit, offset: flightOffset, sessionId, startSearch: startFlightSearch, applyFilters: applyFlightFilters, fetchPage: fetchFlightPage, reset: resetFlights, } = useFlightSearch();
+    const [hasFlightSearched, setHasFlightSearched] = useState(false);
+    useEffect(() => {
+        if (typeof flightStatus === "string" && flightStatus.startsWith("success")) {
+            setHasFlightSearched(true);
+        }
+    }, [flightStatus]);
+    const flightExpiration = useSearchExpiration(30);
+    const hasFlightFilters = airlinesData && Object.keys(airlinesData).length > 0;
+    const isFlightEmptyAfterSearch = hasFlightSearched && !flightLoading && !flightIsFiltering && flightResults.length === 0 && flightTotal === 0 && !hasFlightFilters;
+    const isFlightEmptyAfterFilters = hasFlightSearched && !flightLoading && !flightIsFiltering && flightResults.length === 0 && flightTotal === 0 && hasFlightFilters;
+    const { offers: hotelOffers, allHotels: hotelAllHotels, loading: hotelLoading, isStreaming: hotelIsStreaming, isPageLoading: hotelIsPageLoading, error: hotelError, total: hotelTotal, offset: hotelOffset, limit: hotelLimit, streamCompleted: hotelStreamCompleted, startSearch: startHotelSearch, filterSearch: filterHotelSearch, fetchPage: fetchHotelPage, reset: resetHotels, } = useHotelSearchSSE();
+    const [hasHotelSearched, setHasHotelSearched] = useState(false);
+    const [hotelSearchParams, setHotelSearchParams] = useState(null);
+    const hotelExpiration = useSearchExpiration(30);
+    const { offers: carOffers, loading: carLoading, error: carError, fetchOffers: fetchCarOffers, reset: resetCars, } = useCarOffers();
+    const [hasCarSearched, setHasCarSearched] = useState(false);
+    const [carDays, setCarDays] = useState(1);
+    const [carSearchParams, setCarSearchParams] = useState(null);
+    const [carCurrentPage, setCarCurrentPage] = useState(1);
+    const carExpiration = useSearchExpiration(30);
+    const { filters: carFiltersState, filteredOffers: carFilteredOffers, resetFilters: resetCarFilters, handleRangeChange: handleCarRangeChange, toggle: toggleCarFilter, UI_MIN_PRICE: carUiMinPrice, UI_MAX_PRICE: carUiMaxPrice, setFilters: setCarFilters, } = useCarFilters(carOffers);
+    const [carHasAppliedFilters, setCarHasAppliedFilters] = useState(false);
+    const carIsFiltering = carHasAppliedFilters && carFilteredOffers.length !== carOffers.length;
+    const carPaginatedOffers = useMemo(() => {
+        const start = (carCurrentPage - 1) * ITEMS_PER_PAGE_CAR;
+        return carFilteredOffers.slice(start, start + ITEMS_PER_PAGE_CAR);
+    }, [carFilteredOffers, carCurrentPage]);
+    const carTotalPages = Math.ceil(carFilteredOffers.length / ITEMS_PER_PAGE_CAR);
+    const prevTabRef = React.useRef(activeTab);
+    useEffect(() => {
+        const prev = prevTabRef.current;
+        prevTabRef.current = activeTab;
+        if (prev === activeTab)
+            return;
+        if (prev === "flights") {
+            resetFlights();
+            setHasFlightSearched(false);
+            flightExpiration.reset();
+        }
+        else if (prev === "hotels") {
+            resetHotels();
+            setHasHotelSearched(false);
+            setHotelSearchParams(null);
+            hotelExpiration.reset();
+        }
+        else if (prev === "cars") {
+            resetCars();
+            setHasCarSearched(false);
+            setCarSearchParams(null);
+            resetCarFilters();
+            setCarCurrentPage(1);
+            carExpiration.reset();
+        }
+    }, [activeTab]);
+    const handleHotelSearch = async (params) => {
+        const enriched = { ...params, currency: appCurrency };
+        setHotelSearchParams(enriched);
+        setHasHotelSearched(true);
+        startHotelSearch(enriched);
+    };
+    const handleCarSearch = async (params) => {
+        setHasCarSearched(true);
+        await fetchCarOffers(params);
+    };
+    const bannerStyle = [
+        styles.bannerContainer,
+        { backgroundColor: colors.banner || Colors.primary },
+    ];
+    const bannerTextStyle = [
+        styles.bannerText,
+        { color: colors.textHeadings || Colors.white },
+    ];
+    if (activeTab === "hotels") {
+        const hotelHeader = (_jsxs(_Fragment, { children: [showHeadings && (_jsx(View, { style: bannerStyle, children: _jsx(Text, { style: bannerTextStyle, children: getBannerText() }) })), _jsx(Navbar, { activeTab: activeTab, onTabChange: setActiveTab, translations: translations }), _jsx(HotelSearchForm, { translations: translations, fetchHotelOffers: isPreview ? async () => { } : handleHotelSearch, loading: hotelLoading && !isPreview, onSearchParamsChange: setHotelSearchParams, isPreview: isPreview, expiration: hotelExpiration, hasSearched: hasHotelSearched })] }));
+        return (_jsx(View, { style: styles.container, children: _jsx(HotelResults, { offers: hotelOffers, allHotels: hotelAllHotels, loading: hotelLoading, isStreaming: hotelIsStreaming, isPageLoading: hotelIsPageLoading, error: hotelError, translations: translations, lang: appLang, searchParams: hotelSearchParams, total: hotelTotal, offset: hotelOffset, limit: hotelLimit, fetchPage: fetchHotelPage, filterSearch: filterHotelSearch, currency: appCurrency, headerComponent: hotelHeader }) }));
+    }
+    if (activeTab === "cars") {
+        const carHeader = (_jsxs(_Fragment, { children: [showHeadings && (_jsx(View, { style: bannerStyle, children: _jsx(Text, { style: bannerTextStyle, children: getBannerText() }) })), _jsx(Navbar, { activeTab: activeTab, onTabChange: setActiveTab, translations: translations }), _jsx(CarSearchForm, { startSearch: isPreview ? async () => null : handleCarSearch, loading: carLoading && !isPreview, error: carError, onDaysChange: setCarDays, onSearchParamsChange: setCarSearchParams, translations: translations, isPreview: isPreview, expiration: carExpiration, hasSearched: hasCarSearched })] }));
+        return (_jsx(View, { style: styles.container, children: _jsx(CarResults, { offers: carOffers, filteredOffers: carFilteredOffers, paginatedOffers: carPaginatedOffers, loading: carLoading, error: carError, isFiltering: carIsFiltering, hasAppliedFilters: carHasAppliedFilters, onFilterChange: () => { }, onFiltersApplied: () => setCarHasAppliedFilters(true), days: carDays, searchParams: carSearchParams, translations: translations, hasCarSearched: hasCarSearched, lang: appLang, currency: appCurrency, currentPage: carCurrentPage, totalPages: carTotalPages, onPageChange: setCarCurrentPage, isPageLoading: false, headerComponent: carHeader }) }));
+    }
+    const flightHeader = (_jsxs(_Fragment, { children: [showHeadings && (_jsx(View, { style: bannerStyle, children: _jsx(Text, { style: bannerTextStyle, children: getBannerText() }) })), _jsx(Navbar, { activeTab: activeTab, onTabChange: setActiveTab, translations: translations }), _jsx(FlightSearchForm, { startSearch: isPreview ? async () => null : startFlightSearch, loading: flightLoading && !isPreview, error: flightError, currency: appCurrency, translations: translations, isPreview: isPreview, expiration: flightExpiration, hasSearched: hasFlightSearched }), flightLoading && !flightIsFiltering && (_jsx(ProvidersLoader, { active: flightLoading, type: "flights", translations: translations })), hasFlightSearched && !flightLoading && (flightTotal > 0 || hasFlightFilters) && (_jsx(View, { style: styles.totalCount, children: _jsxs(Text, { style: styles.totalCountText, children: [translations["results_found"], " ", flightTotal, " ", flightTotal === 1 ? translations["flight_singular"] : translations["flight_many"]] }) })), isFlightEmptyAfterSearch && (_jsxs(View, { style: styles.emptyState, children: [_jsx(Text, { style: styles.emptyTitle, children: translations["flights_not_found_title"] || "No flights found" }), _jsx(Text, { style: styles.emptyHint, children: translations["flights_not_found_hint"] || "Try adjusting your search parameters" })] })), isFlightEmptyAfterFilters && (_jsxs(_Fragment, { children: [_jsx(FlightFilters, { filters: filtersData, airlines: airlinesData, sessionId: sessionId, onApplyFilters: applyFlightFilters, translations: translations }), _jsxs(View, { style: styles.emptyState, children: [_jsx(Text, { style: styles.emptyTitle, children: translations["flights_not_found_title"] || "No flights found" }), _jsx(Text, { style: styles.emptyHint, children: translations["flights_not_found_hint"] || "Try adjusting your search parameters" })] })] })), !isFlightEmptyAfterSearch && !isFlightEmptyAfterFilters && (_jsx(_Fragment, { children: flightLoading && !flightIsFiltering ? (_jsx(FlightsSkeleton, { translations: translations })) : ((filtersData || flightResults.length > 0) && (_jsx(FlightFilters, { filters: filtersData, airlines: airlinesData, sessionId: sessionId, onApplyFilters: applyFlightFilters, translations: translations }))) }))] }));
+    return (_jsx(View, { style: styles.container, children: _jsx(FlightResults, { results: flightResults, loading: flightLoading, isFiltering: flightIsFiltering, dictionaries: dictionaries, currencySign: currencySign, airlines: airlinesData, sessionId: sessionId, filtersData: filtersData, total: flightTotal, limit: flightLimit, offset: flightOffset, isPageLoading: flightIsPageLoading, fetchPage: fetchFlightPage, translations: translations, lang: appLang, onFlightSelect: onFlightSelect, headerComponent: flightHeader }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: Colors.background,
+    },
+    bannerContainer: {
+        backgroundColor: Colors.bannerBg,
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.xxxl,
+        paddingTop: 40,
+        alignItems: 'center',
+    },
+    bannerText: {
+        fontSize: FontSize.xxl,
+        fontWeight: '600',
+        color: Colors.bannerText,
+        textTransform: 'uppercase',
+        textAlign: 'center',
+        letterSpacing: -0.2,
+    },
+    totalCount: {
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+    },
+    totalCountText: {
+        fontSize: FontSize.xxl,
+        color: Colors.black,
+        fontWeight: "700",
+        marginBottom: Spacing.lg,
+    },
+    emptyState: {
+        padding: Spacing.xxl,
+        alignItems: 'center',
+    },
+    emptyTitle: {
+        fontSize: FontSize.xl,
+        fontWeight: '600',
+        color: Colors.text,
+        marginBottom: Spacing.sm,
+    },
+    emptyHint: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+        textAlign: 'center',
+    },
+});
+export default App;

package/dist/TravelHubWidget.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type TravelHubWidgetProps = {
+    token: string;
+    lang?: string;
+    currency?: string;
+    config?: any;
+    onFlightSelect?: (flight: any) => void;
+    onHotelSelect?: (hotel: any) => void;
+    onCarSelect?: (car: any) => void;
+    style?: any;
+};
+export declare const TravelHubWidget: React.FC<TravelHubWidgetProps>;

package/dist/TravelHubWidget.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { View, StyleSheet, ActivityIndicator } from 'react-native';
+import { Provider } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import store from './store';
+import { WidgetProvider } from './context/WidgetContext';
+import { setGlobalToken } from './utils/getToken';
+import App from './App';
+import { ErrorBoundary } from './components/ErrorBoundary';
+const CONFIG_URL = 'https://api.travel-code.com/v1/user/widget-config';
+export const TravelHubWidget = ({ token, lang = 'en', currency = 'USD', config: configProp, onFlightSelect, onHotelSelect, onCarSelect, style, }) => {
+    const [remoteConfig, setRemoteConfig] = useState(null);
+    const [configLoading, setConfigLoading] = useState(true);
+    setGlobalToken(token);
+    useEffect(() => {
+        fetch(CONFIG_URL, {
+            method: 'GET',
+            headers: {
+                Authorization: `Bearer ${token}`,
+                Accept: 'application/json',
+            },
+        })
+            .then((res) => {
+            if (!res.ok)
+                throw new Error(`Config fetch failed: ${res.status}`);
+            return res.json();
+        })
+            .then((data) => {
+            setRemoteConfig(data);
+        })
+            .catch(() => { })
+            .finally(() => {
+            setConfigLoading(false);
+        });
+    }, [token]);
+    const mergedConfig = remoteConfig
+        ? { ...configProp, ...remoteConfig }
+        : configProp || {};
+    if (configLoading) {
+        return (_jsx(GestureHandlerRootView, { style: styles.root, children: _jsx(View, { style: [styles.container, styles.loadingContainer, style], children: _jsx(ActivityIndicator, { size: "large", color: "#306DDE" }) }) }));
+    }
+    return (_jsx(GestureHandlerRootView, { style: styles.root, children: _jsx(Provider, { store: store, children: _jsx(WidgetProvider, { token: token, initialConfig: mergedConfig, lang: lang, currency: currency, children: _jsx(SafeAreaView, { style: [styles.container, style], children: _jsx(ErrorBoundary, { children: _jsx(App, { lang: lang, currency: currency, onFlightSelect: onFlightSelect, onHotelSelect: onHotelSelect, onCarSelect: onCarSelect }) }) }) }) }) }));
+};
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+    },
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    loadingContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});

package/dist/components/ErrorBoundary.d.ts

@@ -0,0 +1,18 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    fallbackMessage?: string;
+    onReset?: () => void;
+};
+type State = {
+    hasError: boolean;
+    error: Error | null;
+};
+export declare class ErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    handleReset: () => void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/dist/components/ErrorBoundary.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { Colors, Spacing, FontSize, BorderRadius } from "../theme/colors";
+export class ErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = { hasError: false, error: null };
+        this.handleReset = () => {
+            this.setState({ hasError: false, error: null });
+            this.props.onReset?.();
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, info) {
+        console.error("ErrorBoundary caught:", error, info.componentStack);
+    }
+    render() {
+        if (this.state.hasError) {
+            return (_jsxs(View, { style: styles.container, children: [_jsx(Text, { style: styles.icon, children: "\u26A0\uFE0F" }), _jsx(Text, { style: styles.title, children: this.props.fallbackMessage || "Something went wrong" }), _jsx(Text, { style: styles.message, children: this.state.error?.message || "An unexpected error occurred" }), _jsx(TouchableOpacity, { style: styles.button, onPress: this.handleReset, activeOpacity: 0.7, children: _jsx(Text, { style: styles.buttonText, children: "Try again" }) })] }));
+        }
+        return this.props.children;
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: Spacing.xxl,
+        backgroundColor: Colors.background,
+    },
+    icon: {
+        fontSize: 48,
+        marginBottom: Spacing.lg,
+    },
+    title: {
+        fontSize: FontSize.xl,
+        fontWeight: "600",
+        color: Colors.text,
+        marginBottom: Spacing.sm,
+        textAlign: "center",
+    },
+    message: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+        textAlign: "center",
+        marginBottom: Spacing.xl,
+    },
+    button: {
+        backgroundColor: Colors.primary,
+        paddingHorizontal: Spacing.xxl,
+        paddingVertical: Spacing.md,
+        borderRadius: BorderRadius.md,
+    },
+    buttonText: {
+        color: Colors.white,
+        fontSize: FontSize.md,
+        fontWeight: "600",
+    },
+});

package/dist/components/ui/Modal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface ModalProps {
+    visible: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    fullScreen?: boolean;
+    contentStyle?: ViewStyle;
+}
+export declare function Modal({ visible, onClose, title, children, fullScreen, contentStyle, }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/Modal.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal as RNModal, View, Text, TouchableOpacity, StyleSheet, ScrollView, } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Colors, Spacing, BorderRadius, FontSize } from '../../theme/colors';
+import { CloseIcon } from '../../store';
+export function Modal({ visible, onClose, title, children, fullScreen = false, contentStyle, }) {
+    const insets = useSafeAreaInsets();
+    return (_jsx(RNModal, { visible: visible, animationType: fullScreen ? 'slide' : 'fade', transparent: !fullScreen, onRequestClose: onClose, children: fullScreen ? (_jsxs(View, { style: [styles.fullScreenContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.closeButtonTopRight, onPress: onClose, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), title ? (_jsx(View, { style: styles.header, children: _jsx(Text, { style: styles.title, children: title }) })) : null, _jsx(ScrollView, { style: styles.scrollView, contentContainerStyle: [styles.scrollContent, contentStyle], keyboardShouldPersistTaps: "handled", children: children })] })) : (_jsx(View, { style: styles.overlay, children: _jsxs(View, { style: styles.dialog, children: [_jsxs(View, { style: styles.dialogHeader, children: [title ? _jsx(Text, { style: styles.title, children: title }) : _jsx(View, {}), _jsx(TouchableOpacity, { onPress: onClose, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) })] }), _jsx(ScrollView, { style: styles.dialogScrollView, contentContainerStyle: [styles.scrollContent, contentStyle], keyboardShouldPersistTaps: "handled", children: children })] }) })) }));
+}
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: Colors.overlay,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: Spacing.xxl,
+    },
+    dialog: {
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.xl,
+        width: '100%',
+        maxHeight: '80%',
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+        elevation: 8,
+    },
+    fullScreenContainer: {
+        flex: 1,
+        backgroundColor: Colors.surface,
+    },
+    closeButtonTopRight: {
+        alignSelf: 'flex-end',
+        padding: Spacing.lg,
+    },
+    header: {
+        paddingHorizontal: Spacing.lg,
+        paddingBottom: Spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.border,
+    },
+    dialogHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.border,
+    },
+    title: {
+        fontSize: FontSize.lg,
+        fontWeight: '700',
+        color: Colors.text,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    dialogScrollView: {
+        flexGrow: 0,
+    },
+    scrollContent: {
+        padding: Spacing.lg,
+    },
+});

package/dist/components/ui/Skeleton.d.ts

@@ -0,0 +1,8 @@
+import { ViewStyle, DimensionValue } from 'react-native';
+export interface SkeletonProps {
+    width: DimensionValue;
+    height: DimensionValue;
+    borderRadius?: number;
+    style?: ViewStyle;
+}
+export declare function Skeleton({ width, height, borderRadius, style, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/Skeleton.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { Colors, BorderRadius } from '../../theme/colors';
+export function Skeleton({ width, height, borderRadius = BorderRadius.md, style, }) {
+    const opacity = useRef(new Animated.Value(0.4)).current;
+    useEffect(() => {
+        const animation = Animated.loop(Animated.sequence([
+            Animated.timing(opacity, {
+                toValue: 1,
+                duration: 800,
+                useNativeDriver: true,
+            }),
+            Animated.timing(opacity, {
+                toValue: 0.4,
+                duration: 800,
+                useNativeDriver: true,
+            }),
+        ]));
+        animation.start();
+        return () => animation.stop();
+    }, [opacity]);
+    return (_jsx(Animated.View, { style: [
+            styles.skeleton,
+            { width, height, borderRadius, opacity },
+            style,
+        ] }));
+}
+const styles = StyleSheet.create({
+    skeleton: {
+        backgroundColor: Colors.skeleton,
+    },
+});

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success';
+export interface BadgeProps {
+    variant?: BadgeVariant;
+    children: React.ReactNode;
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+}
+export declare function Badge({ variant, children, style, textStyle }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/badge.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from 'react-native';
+import { Colors, Spacing, BorderRadius, FontSize } from '../../theme/colors';
+const getVariantStyles = (variant) => {
+    switch (variant) {
+        case 'default':
+            return {
+                container: { backgroundColor: Colors.primary },
+                text: { color: Colors.textOnPrimary },
+            };
+        case 'secondary':
+            return {
+                container: { backgroundColor: Colors.primaryLight },
+                text: { color: Colors.primary },
+            };
+        case 'destructive':
+            return {
+                container: { backgroundColor: Colors.error },
+                text: { color: Colors.textOnPrimary },
+            };
+        case 'outline':
+            return {
+                container: {
+                    backgroundColor: Colors.transparent,
+                    borderWidth: 1,
+                    borderColor: Colors.border,
+                },
+                text: { color: Colors.text },
+            };
+        case 'success':
+            return {
+                container: { backgroundColor: Colors.success },
+                text: { color: Colors.textOnPrimary },
+            };
+    }
+};
+export function Badge({ variant = 'default', children, style, textStyle }) {
+    const variantStyles = getVariantStyles(variant);
+    return (_jsx(View, { style: [styles.base, variantStyles.container, style], children: typeof children === 'string' ? (_jsx(Text, { style: [styles.text, variantStyles.text, textStyle], children: children })) : (children) }));
+}
+const styles = StyleSheet.create({
+    base: {
+        alignSelf: 'flex-start',
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: Spacing.sm + 2,
+        paddingVertical: 2,
+        borderRadius: BorderRadius.full,
+    },
+    text: {
+        fontSize: FontSize.xs,
+        fontWeight: '600',
+    },
+});

package/dist/components/ui/button.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ViewStyle, TextStyle, TouchableOpacityProps } from 'react-native';
+type ButtonVariant = 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive';
+type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends Omit<TouchableOpacityProps, 'style'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children: React.ReactNode;
+    loading?: boolean;
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+}
+export declare function Button({ variant, size, children, loading, disabled, style, textStyle, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};