@devtravelcode/widget-native 1.0.0

package/dist/modules/search-form/AgeSelector.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { View, Text, TouchableOpacity, FlatList, Modal, StyleSheet, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Svg, { Path } from "react-native-svg";
+import { Colors, Spacing, FontSize } from "../../theme/colors";
+import { CloseIcon } from "../../store";
+import { formStyles } from "../../theme/formStyles";
+const ChevronDown = () => (_jsx(Svg, { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", children: _jsx(Path, { d: "M5 8L10 12.5L15 8", stroke: Colors.primary, strokeWidth: 2, strokeLinecap: "round" }) }));
+const AGE_OPTIONS = [
+    ...Array.from({ length: 12 }, (_, i) => ({
+        id: String(18 + i),
+        label: String(18 + i),
+    })),
+    { id: "30-65", label: "30\u201365" },
+    ...Array.from({ length: 14 }, (_, i) => ({
+        id: String(66 + i),
+        label: String(66 + i),
+    })),
+    { id: "80+", label: "80+" },
+];
+const AgeSelector = ({ label, value, onChange, translations, }) => {
+    const insets = useSafeAreaInsets();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [displayText, setDisplayText] = useState("");
+    useEffect(() => {
+        if (!value)
+            return;
+        const found = AGE_OPTIONS.find((a) => a.id === value);
+        if (found) {
+            setDisplayText(found.label);
+        }
+    }, [value]);
+    const handleSelect = (age) => {
+        onChange(age.id);
+        setDisplayText(age.label);
+        setIsModalOpen(false);
+    };
+    const renderItem = ({ item }) => {
+        const isActive = item.id === value;
+        return (_jsxs(TouchableOpacity, { style: [styles.optionItem, isActive && styles.optionItemActive], onPress: () => handleSelect(item), activeOpacity: 0.7, children: [_jsx(Text, { style: [styles.optionText, isActive && styles.optionTextActive], children: item.label }), isActive && _jsx(Text, { style: styles.checkMark, children: "\u2713" })] }));
+    };
+    return (_jsxs(View, { children: [_jsx(View, { style: styles.inputContainer, children: _jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => setIsModalOpen(true), activeOpacity: 0.7, children: [_jsx(Text, { style: formStyles.label, children: translations["age_selector_label"] || label }), _jsxs(View, { style: formStyles.inputTriggerRow, children: [_jsx(Text, { style: [
+                                        formStyles.inputTriggerText,
+                                        !displayText && formStyles.inputTriggerPlaceholder,
+                                    ], children: displayText ||
+                                        translations["age_selector_placeholder"] ||
+                                        label }), _jsx(ChevronDown, {})] })] }) }), _jsx(Modal, { visible: isModalOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: () => setIsModalOpen(false), children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => setIsModalOpen(false), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), _jsx(View, { style: styles.modalHeader, children: _jsx(Text, { style: styles.modalTitle, children: translations["age_selector_placeholder"] || label }) }), _jsx(FlatList, { data: AGE_OPTIONS, renderItem: renderItem, keyExtractor: (item) => item.id, contentContainerStyle: styles.listContent, showsVerticalScrollIndicator: false, initialScrollIndex: value
+                                ? Math.max(0, AGE_OPTIONS.findIndex((a) => a.id === value))
+                                : 0, getItemLayout: (_, index) => ({
+                                length: 52,
+                                offset: 52 * index,
+                                index,
+                            }) })] }) })] }));
+};
+const styles = StyleSheet.create({
+    inputContainer: {
+        marginBottom: Spacing.md,
+    },
+    modalContainer: {
+        flex: 1,
+        backgroundColor: Colors.surface,
+    },
+    closeButton: {
+        alignSelf: "flex-end",
+        padding: Spacing.lg,
+    },
+    modalHeader: {
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.border,
+    },
+    modalTitle: {
+        fontSize: FontSize.lg,
+        fontWeight: "700",
+        color: Colors.text,
+    },
+    listContent: {
+        paddingBottom: Spacing.xxl,
+    },
+    optionItem: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+        height: 52,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.borderLight,
+    },
+    optionItemActive: {
+        backgroundColor: Colors.primaryLight,
+    },
+    optionText: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+    },
+    optionTextActive: {
+        color: Colors.primary,
+        fontWeight: "600",
+    },
+    checkMark: {
+        fontSize: FontSize.md,
+        color: Colors.primary,
+        fontWeight: "700",
+    },
+});
+export default AgeSelector;

package/dist/modules/search-form/CustomSelect.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type CustomSelectOption = {
+    label: string | number;
+    value: string | number;
+};
+type CustomSelectProps = {
+    value: string | number;
+    options: CustomSelectOption[];
+    onChange: (value: string | number) => void;
+    placeholder?: string;
+    className?: string;
+};
+declare const CustomSelect: React.FC<CustomSelectProps>;
+export default CustomSelect;

package/dist/modules/search-form/CustomSelect.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { View, Text, TouchableOpacity, FlatList, Modal, StyleSheet, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../theme/colors";
+const CustomSelect = ({ value, options, onChange, placeholder = "Select", }) => {
+    const insets = useSafeAreaInsets();
+    const [isOpen, setIsOpen] = useState(false);
+    const selected = options.find((o) => o.value === value);
+    const handleSelect = (opt) => {
+        onChange(opt.value);
+        setIsOpen(false);
+    };
+    const renderItem = ({ item }) => {
+        const isActive = value === item.value;
+        return (_jsxs(TouchableOpacity, { style: [styles.optionItem, isActive && styles.optionItemActive], onPress: () => handleSelect(item), activeOpacity: 0.7, children: [_jsx(Text, { style: [
+                        styles.optionText,
+                        isActive && styles.optionTextActive,
+                    ], children: item.label }), isActive && _jsx(Text, { style: styles.checkMark, children: "\u2713" })] }));
+    };
+    return (_jsxs(View, { children: [_jsxs(TouchableOpacity, { style: styles.trigger, onPress: () => setIsOpen(true), activeOpacity: 0.7, children: [_jsx(Text, { style: [
+                            styles.triggerText,
+                            !selected && styles.triggerPlaceholder,
+                        ], numberOfLines: 1, children: selected ? selected.label : placeholder }), _jsx(Text, { style: styles.chevron, children: "\u25BC" })] }), _jsx(Modal, { visible: isOpen, transparent: true, animationType: "fade", onRequestClose: () => setIsOpen(false), children: _jsx(TouchableOpacity, { style: styles.overlay, activeOpacity: 1, onPress: () => setIsOpen(false), children: _jsx(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: _jsx(View, { style: styles.modalContent, children: _jsx(FlatList, { data: options, renderItem: renderItem, keyExtractor: (item) => String(item.value), showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled" }) }) }) }) })] }));
+};
+const styles = StyleSheet.create({
+    trigger: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        backgroundColor: Colors.surfaceSecondary,
+        borderRadius: BorderRadius.md,
+        paddingHorizontal: Spacing.md,
+        paddingVertical: Spacing.md,
+        borderWidth: 1,
+        borderColor: Colors.border,
+    },
+    triggerText: {
+        flex: 1,
+        fontSize: FontSize.md,
+        color: Colors.text,
+    },
+    triggerPlaceholder: {
+        color: Colors.textTertiary,
+    },
+    chevron: {
+        fontSize: FontSize.xs,
+        color: Colors.primary,
+        marginLeft: Spacing.sm,
+    },
+    overlay: {
+        flex: 1,
+        backgroundColor: Colors.overlay,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: Spacing.xxl,
+    },
+    modalContainer: {
+        width: "100%",
+        maxHeight: "70%",
+    },
+    modalContent: {
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.lg,
+        overflow: "hidden",
+        maxHeight: 400,
+    },
+    optionItem: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.borderLight,
+    },
+    optionItemActive: {
+        backgroundColor: Colors.primaryLight,
+    },
+    optionText: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+    },
+    optionTextActive: {
+        color: Colors.primary,
+        fontWeight: "600",
+    },
+    checkMark: {
+        fontSize: FontSize.md,
+        color: Colors.primary,
+        fontWeight: "700",
+    },
+});
+export default CustomSelect;

package/dist/modules/search-form/FiltersSkeleton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type Props = {
+    translations: Record<string, string>;
+};
+declare const FiltersSkeleton: React.FC<Props>;
+export default FiltersSkeleton;

package/dist/modules/search-form/FiltersSkeleton.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, ActivityIndicator, StyleSheet } from "react-native";
+import { Skeleton } from "../../components/ui/Skeleton";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../theme/colors";
+const FiltersSkeleton = ({ translations }) => {
+    return (_jsx(View, { style: styles.container, children: _jsx(View, { style: styles.card, children: _jsxs(View, { style: styles.content, children: [_jsx(Text, { style: styles.loadingText, children: translations["loading_filters"] || "Loading filters..." }), _jsx(ActivityIndicator, { size: "small", color: Colors.primary, style: styles.loader }), _jsx(Skeleton, { width: "100%", height: 16, style: { marginTop: Spacing.lg } }), _jsx(Skeleton, { width: "80%", height: 16, style: { marginTop: Spacing.sm } }), _jsx(Skeleton, { width: "60%", height: 16, style: { marginTop: Spacing.sm } }), _jsx(Skeleton, { width: "100%", height: 40, style: { marginTop: Spacing.lg } }), _jsx(Skeleton, { width: "100%", height: 16, style: { marginTop: Spacing.lg } }), _jsx(Skeleton, { width: "70%", height: 16, style: { marginTop: Spacing.sm } })] }) }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        paddingHorizontal: Spacing.lg,
+        marginBottom: Spacing.md,
+    },
+    card: {
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.lg,
+        padding: Spacing.lg,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    content: {
+        alignItems: "center",
+    },
+    loadingText: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+        marginBottom: Spacing.sm,
+    },
+    loader: {
+        marginBottom: Spacing.md,
+    },
+});
+export default FiltersSkeleton;

package/dist/modules/search-form/NationalityInput.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export type Country = {
+    code: string;
+    title: string;
+    titleEn?: string;
+    flag?: string;
+};
+type NationalityInputProps = {
+    label: string;
+    value: string;
+    onChange: (val: string) => void;
+    translations: Record<string, string>;
+    defaultNationality?: string | null;
+    defaultNationalities?: string[] | null;
+    lang?: "ru" | "en";
+};
+declare const NationalityInput: React.FC<NationalityInputProps>;
+export default NationalityInput;

package/dist/modules/search-form/NationalityInput.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { View, Text, TextInput, TouchableOpacity, FlatList, Modal, StyleSheet, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Svg, { Circle, Path } from "react-native-svg";
+import { SvgUri } from "react-native-svg";
+import { useCountriesSearch } from "../hooks/useCountriesSearch";
+import { useCountriesByCodes } from "../hooks/useCountriesByCodes";
+import { Colors, Spacing, FontSize } from "../../theme/colors";
+import { CloseIcon } from "../../store";
+import { formStyles } from "../../theme/formStyles";
+const SearchIcon = () => (_jsxs(Svg, { width: 19, height: 18, viewBox: "0 0 19 18", fill: "none", children: [_jsx(Circle, { cx: 7, cy: 7, r: 6, stroke: Colors.primary, strokeWidth: 2 }), _jsx(Path, { d: "M12 11L17.2857 16.0902", stroke: Colors.primary, strokeWidth: 2, strokeLinecap: "round" })] }));
+const FLAG_BASE = "https://cdn.travel-code.com/images/remaster/flags";
+const POPULAR_FALLBACK = [
+    { code: "PL", title: "\u041F\u043E\u043B\u044C\u0448\u0430", titleEn: "Poland", flag: `${FLAG_BASE}/PL.svg` },
+    { code: "LT", title: "\u041B\u0438\u0442\u0432\u0430", titleEn: "Lithuania", flag: `${FLAG_BASE}/LT.svg` },
+    { code: "LV", title: "\u041B\u0430\u0442\u0432\u0438\u044F", titleEn: "Latvia", flag: `${FLAG_BASE}/LV.svg` },
+    { code: "DE", title: "\u0413\u0435\u0440\u043C\u0430\u043D\u0438\u044F", titleEn: "Germany", flag: `${FLAG_BASE}/DE.svg` },
+    { code: "TR", title: "\u0422\u0443\u0440\u0446\u0438\u044F", titleEn: "Turkey", flag: `${FLAG_BASE}/TR.svg` },
+];
+const NationalityInput = ({ label, value, onChange, translations, defaultNationality, defaultNationalities, lang = "ru", }) => {
+    const insets = useSafeAreaInsets();
+    const [query, setQuery] = useState("");
+    const [selectedCountry, setSelectedCountry] = useState(null);
+    const [initializedFromIP, setInitializedFromIP] = useState(false);
+    const [wasClearedManually, setWasClearedManually] = useState(false);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [modalQuery, setModalQuery] = useState("");
+    const { results: apiCountries, loading: apiLoading } = useCountriesSearch(modalQuery);
+    const { countries: popularFromConfig } = useCountriesByCodes(defaultNationalities && defaultNationalities.length
+        ? defaultNationalities
+        : null);
+    const { countries: ipCountry } = useCountriesByCodes(defaultNationality ? [defaultNationality] : null);
+    const getLabel = (c) => lang === "en" ? c.titleEn || c.title : c.title;
+    useEffect(() => {
+        if (!initializedFromIP && ipCountry && ipCountry[0] && !wasClearedManually) {
+            const c = ipCountry[0];
+            setQuery(getLabel(c));
+            setSelectedCountry(c);
+            onChange(c.code);
+            setInitializedFromIP(true);
+        }
+    }, [ipCountry, initializedFromIP, wasClearedManually]);
+    useEffect(() => {
+        if (!selectedCountry)
+            return;
+        setQuery(getLabel(selectedCountry));
+    }, [lang]);
+    const popularList = useMemo(() => {
+        const list = popularFromConfig?.length ? popularFromConfig : POPULAR_FALLBACK;
+        return [...list].sort((a, b) => getLabel(a).localeCompare(getLabel(b), lang === "en" ? "en" : "ru"));
+    }, [popularFromConfig, lang]);
+    const filteredCountries = modalQuery.trim().length < 2
+        ? []
+        : apiCountries.map((c) => ({
+            code: c.code,
+            title: c.title,
+            titleEn: c.titleEn,
+            flag: `${FLAG_BASE}/${c.code}.svg`,
+        }));
+    const showPopular = !modalQuery.trim() ||
+        (modalQuery.trim().length < 2 && filteredCountries.length === 0);
+    const displayList = showPopular ? popularList : filteredCountries;
+    const handleSelect = (country) => {
+        const countryLabel = getLabel(country);
+        setQuery(countryLabel);
+        setSelectedCountry(country);
+        onChange(country.code);
+        setIsModalOpen(false);
+        setWasClearedManually(false);
+    };
+    const openModal = () => {
+        setModalQuery("");
+        setIsModalOpen(true);
+    };
+    const renderCountryItem = ({ item }) => {
+        const countryLabel = getLabel(item);
+        const isActive = query.trim().toLowerCase() === countryLabel.toLowerCase();
+        return (_jsxs(TouchableOpacity, { style: [styles.countryItem, isActive && styles.countryItemActive], onPress: () => handleSelect(item), activeOpacity: 0.7, children: [_jsx(View, { style: styles.flagContainer, children: _jsx(SvgUri, { uri: item.flag || `${FLAG_BASE}/${item.code}.svg`, width: 24, height: 18 }) }), _jsxs(View, { style: styles.countryInfo, children: [_jsx(Text, { style: styles.countryName, children: countryLabel }), _jsx(Text, { style: styles.countryCode, children: item.code })] })] }));
+    };
+    return (_jsxs(View, { children: [_jsx(View, { style: styles.inputContainer, children: _jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: openModal, activeOpacity: 0.7, children: [_jsx(Text, { style: formStyles.label, children: label }), _jsxs(View, { style: formStyles.inputTriggerRow, children: [_jsx(Text, { style: [
+                                        formStyles.inputTriggerText,
+                                        !query && formStyles.inputTriggerPlaceholder,
+                                    ], numberOfLines: 1, children: query || label }), selectedCountry?.code && (_jsx(Text, { style: formStyles.inputTriggerCode, children: selectedCountry.code }))] })] }) }), _jsx(Modal, { visible: isModalOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: () => setIsModalOpen(false), children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => setIsModalOpen(false), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), _jsxs(View, { style: styles.searchHeader, children: [_jsx(SearchIcon, {}), _jsx(TextInput, { style: styles.searchInput, value: modalQuery, onChangeText: (val) => {
+                                        setModalQuery(val);
+                                        if (!val.trim()) {
+                                            setSelectedCountry(null);
+                                            setWasClearedManually(true);
+                                            onChange("");
+                                        }
+                                    }, placeholder: translations["nationality_search_placeholder"] ||
+                                        "Search country...", placeholderTextColor: Colors.textTertiary, autoFocus: true })] }), _jsxs(View, { style: styles.modalContent, children: [showPopular && selectedCountry && (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.sectionTitle, children: translations["nationality_selected"] || "Selected" }), renderCountryItem({ item: selectedCountry })] })), showPopular && (_jsx(Text, { style: styles.sectionTitle, children: translations["nationality_popular_title"] || "Popular countries" })), !showPopular &&
+                                    filteredCountries.length === 0 &&
+                                    modalQuery.length >= 2 && (_jsx(Text, { style: styles.noResults, children: translations["nationality_popup_no_results"] ||
+                                        "Nothing found" })), _jsx(FlatList, { data: displayList, renderItem: renderCountryItem, keyExtractor: (item) => item.code, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled" })] })] }) })] }));
+};
+const styles = StyleSheet.create({
+    inputContainer: {},
+    modalContainer: {
+        flex: 1,
+        backgroundColor: Colors.surface,
+    },
+    closeButton: {
+        alignSelf: "flex-end",
+        padding: Spacing.lg,
+    },
+    searchHeader: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.border,
+        gap: Spacing.md,
+    },
+    searchInput: {
+        flex: 1,
+        fontSize: FontSize.lg,
+        color: Colors.text,
+        paddingVertical: Spacing.sm,
+    },
+    modalContent: {
+        flex: 1,
+    },
+    sectionTitle: {
+        fontSize: FontSize.sm,
+        color: Colors.textTertiary,
+        fontWeight: "600",
+        textTransform: "uppercase",
+        paddingVertical: Spacing.md,
+        letterSpacing: 0.5,
+        paddingHorizontal: Spacing.lg,
+    },
+    noResults: {
+        padding: Spacing.lg,
+        fontSize: FontSize.md,
+        color: Colors.textTertiary,
+    },
+    countryItem: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.borderLight,
+    },
+    countryItemActive: {
+        backgroundColor: Colors.primaryLight,
+    },
+    flagContainer: {
+        width: 24,
+        height: 18,
+        marginRight: Spacing.md,
+        overflow: "hidden",
+        borderRadius: 2,
+    },
+    countryInfo: {
+        flex: 1,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    countryName: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+    },
+    countryCode: {
+        fontSize: FontSize.sm,
+        color: Colors.textTertiary,
+    },
+});
+export default NationalityInput;

package/dist/modules/search-form/Pagination.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type PaginationProps = {
+    totalPages: number;
+    currentPage: number;
+    onPageChange: (page: number) => void;
+};
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;

package/dist/modules/search-form/Pagination.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../theme/colors";
+const Pagination = ({ totalPages, currentPage, onPageChange, }) => {
+    if (totalPages <= 1)
+        return null;
+    const pages = [];
+    pages.push(1);
+    if (currentPage > 4)
+        pages.push("...");
+    for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
+        pages.push(i);
+    }
+    if (currentPage < totalPages - 3)
+        pages.push("...");
+    if (totalPages > 1)
+        pages.push(totalPages);
+    const handlePageClick = (page) => {
+        if (page === "..." || page === currentPage)
+            return;
+        onPageChange(page);
+    };
+    return (_jsxs(View, { style: styles.container, children: [_jsx(TouchableOpacity, { style: [styles.pageButton, currentPage === 1 && styles.pageButtonDisabled], onPress: () => currentPage > 1 && onPageChange(currentPage - 1), disabled: currentPage === 1, activeOpacity: 0.7, children: _jsx(Text, { style: [
+                        styles.pageButtonText,
+                        currentPage === 1 && styles.pageButtonTextDisabled,
+                    ], children: "\u2039" }) }), pages.map((p, i) => (_jsx(TouchableOpacity, { style: [
+                    styles.pageButton,
+                    p === currentPage && styles.pageButtonActive,
+                    p === "..." && styles.pageButtonEllipsis,
+                ], onPress: () => handlePageClick(p), disabled: p === "...", activeOpacity: 0.7, children: _jsx(Text, { style: [
+                        styles.pageButtonText,
+                        p === currentPage && styles.pageButtonTextActive,
+                        p === "..." && styles.pageButtonTextEllipsis,
+                    ], children: p }) }, i))), _jsx(TouchableOpacity, { style: [
+                    styles.pageButton,
+                    currentPage === totalPages && styles.pageButtonDisabled,
+                ], onPress: () => currentPage < totalPages && onPageChange(currentPage + 1), disabled: currentPage === totalPages, activeOpacity: 0.7, children: _jsx(Text, { style: [
+                        styles.pageButtonText,
+                        currentPage === totalPages && styles.pageButtonTextDisabled,
+                    ], children: "\u203A" }) })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: Spacing.xs,
+    },
+    pageButton: {
+        minWidth: 36,
+        height: 36,
+        borderRadius: BorderRadius.md,
+        backgroundColor: Colors.surface,
+        justifyContent: "center",
+        alignItems: "center",
+        borderWidth: 1,
+        borderColor: Colors.border,
+    },
+    pageButtonActive: {
+        backgroundColor: Colors.primary,
+        borderColor: Colors.primary,
+    },
+    pageButtonDisabled: {
+        opacity: 0.4,
+    },
+    pageButtonEllipsis: {
+        borderColor: Colors.transparent,
+    },
+    pageButtonText: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        fontWeight: "500",
+    },
+    pageButtonTextActive: {
+        color: Colors.textOnPrimary,
+    },
+    pageButtonTextDisabled: {
+        color: Colors.textTertiary,
+    },
+    pageButtonTextEllipsis: {
+        color: Colors.textTertiary,
+    },
+});
+export default Pagination;

package/dist/modules/search-form/SearchExpiredPopup.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type Props = {
+    isOpen: boolean;
+    onRefresh: () => void;
+    onClose: () => void;
+    translations: Record<string, string>;
+    type: "flight" | "hotel" | "car";
+};
+declare const SearchExpiredPopup: React.FC<Props>;
+export default SearchExpiredPopup;

package/dist/modules/search-form/SearchExpiredPopup.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, TouchableOpacity, Modal, StyleSheet, } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { Colors, Spacing, BorderRadius, FontSize } from "../../theme/colors";
+const TITLES = {
+    flight: "Flight results may be outdated",
+    hotel: "Hotel results may be outdated",
+    car: "Rental car results may be outdated",
+};
+const DESCRIPTIONS = {
+    flight: "Ticket prices change several times a day. Update your search to get exact prices.",
+    hotel: "Hotel availability and prices change frequently. Update your search to get valid offers.",
+    car: "Car rental prices change often. Update your search to get the latest deals.",
+};
+const SearchExpiredPopup = ({ isOpen, onRefresh, onClose, translations, type, }) => {
+    if (!isOpen)
+        return null;
+    const title = translations[`search_expired_title_${type}`] ||
+        translations["search_expired_title"] ||
+        TITLES[type];
+    const description = translations[`search_expired_description_${type}`] ||
+        translations["search_expired_description"] ||
+        DESCRIPTIONS[type];
+    const btnLater = translations["search_expired_later"] || "Later";
+    const btnRefresh = translations[`search_expired_refresh_${type}`] ||
+        translations["search_expired_refresh"] ||
+        "Refresh";
+    return (_jsx(Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: onClose, children: _jsx(View, { style: styles.overlay, children: _jsxs(View, { style: styles.popup, children: [_jsxs(Svg, { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", children: [_jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M7.30864 5H7.36497C7.53622 5 7.67961 5.12976 7.69665 5.30017L7.99996 8.33333L10.1653 9.57069C10.2692 9.63004 10.3333 9.74049 10.3333 9.86011V10C10.3333 10.1406 10.2193 10.2546 10.0787 10.2546C10.0561 10.2546 10.0335 10.2516 10.0117 10.2456L6.9324 9.40582C6.77815 9.36375 6.6755 9.21808 6.68776 9.05866L6.97629 5.30777C6.98965 5.1341 7.13446 5 7.30864 5Z", fill: "#B5B5C2" }), _jsx(Path, { opacity: 0.3, fillRule: "evenodd", clipRule: "evenodd", d: "M4.92649 1.88974C5.76807 1.53139 6.69419 1.3331 7.66663 1.3331C11.5326 1.3331 14.6666 4.46711 14.6666 8.3331C14.6666 12.1991 11.5326 15.3331 7.66663 15.3331C3.80063 15.3331 0.666626 12.1991 0.666626 8.3331C0.666626 7.67652 0.757022 7.04106 0.926048 6.43847L2.20983 6.79857C2.07111 7.29314 1.99996 7.80772 1.99996 8.3331C1.99996 11.4627 4.53701 13.9998 7.66663 13.9998C10.7962 13.9998 13.3333 11.4627 13.3333 8.3331C13.3333 5.20349 10.7962 2.66643 7.66663 2.66643C7.03247 2.66643 6.41487 2.77039 5.83244 2.96941L6.62628 3.91547C6.6725 3.97055 6.69967 4.03909 6.70373 4.11087C6.71415 4.29467 6.57359 4.45212 6.38979 4.46253L3.14515 4.6464C3.11283 4.64823 3.08043 4.64535 3.04895 4.63784C2.86988 4.59513 2.75934 4.41533 2.80205 4.23626L3.55438 1.08217C3.57099 1.01257 3.60955 0.950159 3.66436 0.904165C3.80538 0.785831 4.01564 0.804226 4.13397 0.94525L4.92649 1.88974Z", fill: "#B5B5C2" })] }), _jsx(Text, { style: styles.title, children: title }), _jsx(Text, { style: styles.description, children: description }), _jsxs(View, { style: styles.buttonsRow, children: [_jsx(TouchableOpacity, { style: styles.laterButton, onPress: onClose, activeOpacity: 0.7, children: _jsx(Text, { style: styles.laterButtonText, children: btnLater }) }), _jsx(TouchableOpacity, { style: styles.refreshButton, onPress: onRefresh, activeOpacity: 0.8, children: _jsx(Text, { style: styles.refreshButtonText, children: btnRefresh }) })] })] }) }) }));
+};
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: Colors.overlay,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: Spacing.xxl,
+    },
+    popup: {
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.lg,
+        padding: Spacing.xxl,
+        width: "100%",
+        alignItems: "center",
+    },
+    title: {
+        fontSize: FontSize.lg,
+        fontWeight: "600",
+        color: Colors.text,
+        textAlign: "center",
+        marginTop: Spacing.md,
+    },
+    description: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+        textAlign: "center",
+        marginTop: Spacing.sm,
+        lineHeight: 20,
+    },
+    buttonsRow: {
+        flexDirection: "row",
+        gap: Spacing.md,
+        marginTop: Spacing.xl,
+        width: "100%",
+    },
+    laterButton: {
+        flex: 1,
+        paddingVertical: Spacing.md,
+        borderRadius: BorderRadius.md,
+        borderWidth: 1,
+        borderColor: Colors.border,
+        alignItems: "center",
+    },
+    laterButtonText: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+        fontWeight: "500",
+    },
+    refreshButton: {
+        flex: 1,
+        paddingVertical: Spacing.md,
+        borderRadius: BorderRadius.md,
+        backgroundColor: Colors.primary,
+        alignItems: "center",
+    },
+    refreshButtonText: {
+        fontSize: FontSize.md,
+        color: Colors.textOnPrimary,
+        fontWeight: "600",
+    },
+});
+export default SearchExpiredPopup;

package/dist/modules/search-form/SkeletonWidget.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const SkeletonWidget: React.FC;