@devtravelcode/widget-native 1.0.0

package/dist/modules/search-form/cars/CarResults.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { View, Text, FlatList, ActivityIndicator, StyleSheet, } from "react-native";
+import CarsSkeleton from "./CarSkeleton";
+import CarFiltersSkeleton from "./CarFiltersSkeleton";
+import CarEmptyState from "./CarEmptyState";
+import CarTopOffersSlider from "./CarTopOffersSlider";
+import { CarFilters } from "./car-filters/CarFilters";
+import CarOffersList from "./CarOffersList";
+import Pagination from "../Pagination";
+import { Colors, Spacing, FontSize } from "../../../theme/colors";
+const CarResults = ({ offers, filteredOffers, paginatedOffers, loading, error, isFiltering, hasAppliedFilters, onFilterChange, onFiltersApplied, days, searchParams, translations, hasCarSearched, lang, currency, currentPage, totalPages, onPageChange, isPageLoading, headerComponent, }) => {
+    const hasResults = offers.length > 0;
+    const hasFilteredResults = filteredOffers.length > 0;
+    const filtersAreActive = filteredOffers.length !== offers.length || hasAppliedFilters;
+    const displayCount = filtersAreActive
+        ? filteredOffers.length
+        : offers.length;
+    const resultCountText = useMemo(() => {
+        const label = translations["results_found"] || "Found";
+        const unit = lang === "ru"
+            ? displayCount === 1
+                ? "machine"
+                : displayCount < 5
+                    ? "cars"
+                    : "cars"
+            : displayCount === 1
+                ? "car"
+                : "cars";
+        return `${label} ${displayCount} ${unit}`;
+    }, [displayCount, translations, lang]);
+    const handleCategorySelect = useCallback((category) => {
+        onFiltersApplied?.();
+    }, [onFiltersApplied]);
+    if (!hasCarSearched) {
+        return (_jsx(View, { style: styles.container, children: headerComponent }));
+    }
+    if (loading && !isFiltering) {
+        return (_jsxs(View, { style: styles.container, children: [headerComponent, _jsx(CarFiltersSkeleton, { translations: translations }), _jsx(CarsSkeleton, { translations: translations })] }));
+    }
+    if (isFiltering) {
+        return (_jsxs(View, { style: styles.container, children: [headerComponent, _jsxs(View, { style: styles.filteringContainer, children: [_jsx(ActivityIndicator, { size: "large", color: Colors.primary }), _jsx(Text, { style: styles.filteringText, children: translations["loading"] || "Loading..." })] })] }));
+    }
+    if (error && !loading) {
+        return (_jsxs(View, { style: styles.container, children: [headerComponent, _jsxs(View, { style: styles.errorContainer, children: [_jsx(Text, { style: styles.errorTitle, children: translations["car_search_error_title"] || "Search error" }), _jsx(Text, { style: styles.errorText, children: translations["car_search_error_hint"] || "Something went wrong. Please try again." })] })] }));
+    }
+    if (!loading && !hasResults && !filtersAreActive) {
+        return (_jsxs(View, { style: styles.container, children: [headerComponent, _jsx(CarEmptyState, { translations: translations })] }));
+    }
+    const renderHeader = () => (_jsxs(View, { children: [headerComponent, _jsx(CarTopOffersSlider, { offers: offers, translations: translations, onCategorySelect: handleCategorySelect }), hasCarSearched && !loading ? (_jsx(Text, { style: styles.resultCount, children: resultCountText })) : null, _jsx(CarFilters, { offers: offers, onFilterChange: onFilterChange, onFiltersApplied: onFiltersApplied, translations: translations }), filtersAreActive && !hasFilteredResults ? (_jsx(CarEmptyState, { translations: translations })) : null] }));
+    const renderFooter = () => {
+        if (totalPages <= 1)
+            return null;
+        return (_jsx(View, { style: styles.paginationWrapper, children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }) }));
+    };
+    return (_jsxs(View, { style: styles.container, children: [(isPageLoading || isFiltering) && (_jsxs(View, { style: styles.overlayLoader, children: [_jsx(ActivityIndicator, { size: "large", color: Colors.primary }), _jsx(Text, { style: styles.filteringText, children: translations["loading"] || "Loading..." })] })), hasFilteredResults ? (_jsx(FlatList, { data: [{ key: "content" }], renderItem: () => (_jsx(CarOffersList, { offers: paginatedOffers, days: days, searchParams: searchParams, translations: translations, lang: lang })), keyExtractor: (item) => item.key, ListHeaderComponent: renderHeader(), ListFooterComponent: renderFooter(), showsVerticalScrollIndicator: false, contentContainerStyle: styles.listContent })) : (_jsx(FlatList, { data: [], renderItem: null, ListHeaderComponent: renderHeader(), showsVerticalScrollIndicator: false, contentContainerStyle: styles.listContent }))] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        position: "relative",
+    },
+    listContent: {
+        paddingBottom: Spacing.lg,
+    },
+    filteringContainer: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: Spacing.xxl,
+    },
+    filteringText: {
+        marginTop: Spacing.sm,
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+    },
+    resultCount: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+        fontWeight: "500",
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.sm,
+    },
+    paginationWrapper: {
+        paddingVertical: Spacing.lg,
+        alignItems: "center",
+    },
+    errorContainer: {
+        padding: Spacing.xxl,
+        alignItems: "center",
+    },
+    errorTitle: {
+        fontSize: FontSize.xl,
+        fontWeight: "600",
+        color: Colors.error,
+        marginBottom: Spacing.sm,
+        textAlign: "center",
+    },
+    errorText: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+        textAlign: "center",
+    },
+    overlayLoader: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(255,255,255,0.7)",
+        zIndex: 10,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+});
+export default CarResults;

package/dist/modules/search-form/cars/CarSearchForm.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { useSearchExpiration } from "../../hooks/useSearchExpiration";
+type CarSearchFormProps = {
+    startSearch?: (params: any) => Promise<any>;
+    loading?: boolean;
+    error?: string | null;
+    onDaysChange?: (days: number) => void;
+    onSearchParamsChange?: (params: {
+        country: string;
+        nationality: string;
+        age: number;
+    }) => void;
+    translations: Record<string, string>;
+    isPreview: boolean;
+    expiration?: ReturnType<typeof useSearchExpiration>;
+    hasSearched?: boolean;
+};
+declare const CarSearchForm: React.FC<CarSearchFormProps>;
+export default CarSearchForm;

package/dist/modules/search-form/cars/CarSearchForm.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { View, Text, TouchableOpacity, Switch, ScrollView, ActivityIndicator, StyleSheet, } from "react-native";
+import { format, addDays, differenceInCalendarDays, parseISO } from "date-fns";
+import LocationInput from "../flight/LocationInput";
+import DatePicker from "../flight/DatePicker";
+import NationalityInput from "../NationalityInput";
+import AgeSelector from "../AgeSelector";
+import TimePicker from "../TimePicker";
+import { useWidget } from "../../../context/WidgetContext";
+import SearchExpiredPopup from "../../search-form/SearchExpiredPopup";
+import { useSearchExpiration } from "../../hooks/useSearchExpiration";
+import { useDetectNationality } from "../../hooks/useDetectNationality";
+import { Colors, Spacing, FontSize } from "../../../theme/colors";
+import { formStyles } from "../../../theme/formStyles";
+const CarSearchForm = ({ startSearch, loading = false, error = null, onDaysChange, onSearchParamsChange, translations, isPreview, expiration, hasSearched = false, }) => {
+    const { lang, currency, config, colors } = useWidget();
+    const today = new Date();
+    const defaultPickupDate = format(addDays(today, 3), "yyyy-MM-dd");
+    const defaultDropoffDate = format(addDays(today, 7), "yyyy-MM-dd");
+    const [pickupLocation, setPickupLocation] = useState("");
+    const [dropoffLocation, setDropoffLocation] = useState("");
+    const [dates, setDates] = useState([
+        defaultPickupDate,
+        defaultDropoffDate,
+    ]);
+    const [times, setTimes] = useState(["12:00", "12:00"]);
+    const [driverAge, setDriverAge] = useState("30-65");
+    const [nationality, setNationality] = useState("");
+    const [sameLocation, setSameLocation] = useState(true);
+    const [formErrors, setFormErrors] = useState({
+        pickupLocation: "",
+        dropoffLocation: "",
+        date: "",
+        nationality: "",
+        timePickup: "",
+        timeDropoff: "",
+    });
+    const detectedNationality = useDetectNationality();
+    useEffect(() => {
+        if (!nationality && detectedNationality) {
+            setNationality(detectedNationality);
+        }
+    }, [detectedNationality]);
+    const defaultExpiration = useSearchExpiration(30);
+    const { isExpired: isCarSearchExpired, startTimer, ignore: closeCarSearchPopup, } = expiration || defaultExpiration;
+    const refreshCarSearch = () => {
+        startTimer();
+        closeCarSearchPopup();
+        handleSearchClick();
+    };
+    useEffect(() => {
+        if (config?.defaults?.cars) {
+            const pickup = config.defaults.cars.from || "WAW";
+            setPickupLocation(pickup);
+            setDropoffLocation(pickup);
+            setSameLocation(true);
+        }
+    }, [config]);
+    const resolveDriverAge = (ageValue) => {
+        if (ageValue === "30-65")
+            return 30;
+        if (ageValue === "80+")
+            return 80;
+        return parseInt(ageValue, 10);
+    };
+    const days = dates[0] && dates[1]
+        ? Math.max(1, differenceInCalendarDays(parseISO(dates[1]), parseISO(dates[0])))
+        : 1;
+    useEffect(() => {
+        onDaysChange?.(days);
+    }, [days, onDaysChange]);
+    const handleSearchClick = async () => {
+        if (isPreview)
+            return;
+        startTimer();
+        const errors = {
+            pickupLocation: !pickupLocation
+                ? translations["car_form_error_pickup"] || "Enter pickup location"
+                : "",
+            dropoffLocation: !sameLocation && !dropoffLocation
+                ? translations["car_form_error_dropoff"] || "Enter drop-off location"
+                : "",
+            date: !dates[0]
+                ? translations["car_form_error_date"] || "Select rental dates"
+                : "",
+            nationality: !nationality
+                ? translations["car_form_error_nationality"] || "Select nationality"
+                : "",
+            timePickup: !times[0]
+                ? translations["car_form_error_time_pickup"] || "Select pickup time"
+                : "",
+            timeDropoff: !times[1]
+                ? translations["car_form_error_time_dropoff"] || "Select drop-off time"
+                : "",
+        };
+        setFormErrors(errors);
+        if (Object.values(errors).some((e) => e))
+            return;
+        const payload = {
+            currency: currency,
+            driver: {
+                age: resolveDriverAge(driverAge),
+                residence: nationality,
+            },
+            pickup_at: `${dates[0]}T${times[0]}:00`,
+            dropoff_at: `${dates[1]}T${times[1]}:00`,
+            pickup_location: { iata: pickupLocation },
+            dropoff_location: {
+                iata: sameLocation ? pickupLocation : dropoffLocation,
+            },
+        };
+        onSearchParamsChange?.({
+            country: "France",
+            nationality,
+            age: resolveDriverAge(driverAge),
+        });
+        await startSearch?.(payload);
+    };
+    return (_jsxs(ScrollView, { style: styles.container, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: [_jsxs(View, { style: [
+                    formStyles.formCard,
+                    { backgroundColor: colors?.form || Colors.surface },
+                ], children: [_jsxs(View, { style: styles.sameLocationRow, children: [_jsx(Switch, { value: sameLocation, disabled: true, trackColor: {
+                                    false: Colors.border,
+                                    true: Colors.primaryLight,
+                                }, thumbColor: sameLocation ? Colors.primary : Colors.textTertiary }), _jsx(Text, { style: styles.sameLocationLabel, children: translations["car_form_same_location"] ||
+                                    "Return to same location" })] }), _jsxs(View, { children: [_jsx(DatePicker, { value: dates, onChange: (val) => {
+                                    setDates(val);
+                                    if (formErrors.date)
+                                        setFormErrors((p) => ({ ...p, date: "" }));
+                                }, lang: lang, translations: translations, mode: "car" }), formErrors.date ? (_jsx(Text, { style: formStyles.errorText, children: formErrors.date })) : null] }), _jsxs(View, { children: [_jsx(TimePicker, { value: times, onChange: (val) => {
+                                    setTimes(val);
+                                    if (formErrors.timePickup || formErrors.timeDropoff)
+                                        setFormErrors((p) => ({
+                                            ...p,
+                                            timePickup: "",
+                                            timeDropoff: "",
+                                        }));
+                                }, lang: "ru", translations: translations }), formErrors.timePickup ? (_jsx(Text, { style: formStyles.errorText, children: formErrors.timePickup })) : null, formErrors.timeDropoff ? (_jsx(Text, { style: formStyles.errorText, children: formErrors.timeDropoff })) : null] }), _jsxs(View, { children: [_jsx(LocationInput, { label: translations["car_form_pickup_location"] || "Pickup location", value: pickupLocation, onChange: (val) => {
+                                    setPickupLocation(val);
+                                    if (formErrors.pickupLocation)
+                                        setFormErrors((p) => ({ ...p, pickupLocation: "" }));
+                                }, lang: lang, translations: translations }), formErrors.pickupLocation ? (_jsx(Text, { style: formStyles.errorText, children: formErrors.pickupLocation })) : null] }), !sameLocation ? (_jsxs(View, { children: [_jsx(LocationInput, { label: translations["car_form_dropoff_location"] ||
+                                    "Drop-off location", value: dropoffLocation, onChange: (val) => {
+                                    setDropoffLocation(val);
+                                    if (formErrors.dropoffLocation)
+                                        setFormErrors((p) => ({ ...p, dropoffLocation: "" }));
+                                }, lang: lang, translations: translations }), formErrors.dropoffLocation ? (_jsx(Text, { style: formStyles.errorText, children: formErrors.dropoffLocation })) : null] })) : null, _jsxs(View, { children: [_jsx(NationalityInput, { label: translations["car_form_nationality"] || "Nationality", value: nationality, onChange: (val) => {
+                                    setNationality(val);
+                                    if (formErrors.nationality)
+                                        setFormErrors((p) => ({ ...p, nationality: "" }));
+                                }, translations: translations, defaultNationality: detectedNationality, defaultNationalities: config?.nationalities || null, lang: lang }), formErrors.nationality ? (_jsx(Text, { style: formStyles.errorText, children: formErrors.nationality })) : null] }), _jsx(AgeSelector, { label: translations["car_form_driver_age"] || "Driver age", value: driverAge, onChange: setDriverAge, translations: translations }), _jsx(TouchableOpacity, { style: [
+                            formStyles.searchButton,
+                            { backgroundColor: colors?.primary || Colors.primary },
+                            loading && formStyles.searchButtonDisabled,
+                        ], onPress: handleSearchClick, disabled: loading, activeOpacity: 0.8, children: loading ? (_jsxs(View, { style: formStyles.searchButtonContent, children: [_jsx(ActivityIndicator, { size: "small", color: Colors.textOnPrimary }), _jsx(Text, { style: formStyles.searchButtonText, children: translations["car_form_searching"] || "Searching..." })] })) : (_jsx(Text, { style: formStyles.searchButtonText, children: translations["car_form_search"] || "Search cars" })) }), error ? _jsx(Text, { style: formStyles.searchError, children: error }) : null] }), !isPreview && hasSearched && (_jsx(SearchExpiredPopup, { isOpen: isCarSearchExpired, onRefresh: refreshCarSearch, onClose: closeCarSearchPopup, translations: translations, type: "car" }))] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    sameLocationRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: Spacing.sm,
+    },
+    sameLocationLabel: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        fontWeight: "500",
+    },
+});
+export default CarSearchForm;

package/dist/modules/search-form/cars/CarSkeleton.d.ts

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

package/dist/modules/search-form/cars/CarSkeleton.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, StyleSheet } from "react-native";
+import { Skeleton } from "../../../components/ui/Skeleton";
+import { Colors, Spacing, BorderRadius } from "../../../theme/colors";
+const CarsSkeleton = () => {
+    return (_jsx(View, { style: styles.container, children: [1, 2, 3, 4].map((i) => (_jsxs(View, { style: styles.card, children: [_jsxs(View, { style: styles.cardRow, children: [_jsx(View, { style: styles.imageCol, children: _jsx(Skeleton, { width: "100%", height: 100, borderRadius: BorderRadius.md }) }), _jsxs(View, { style: styles.contentCol, children: [_jsx(Skeleton, { width: 80, height: 12 }), _jsx(Skeleton, { width: "90%", height: 18, style: { marginTop: Spacing.sm } }), _jsxs(View, { style: styles.featuresRow, children: [_jsx(Skeleton, { width: 50, height: 14 }), _jsx(Skeleton, { width: 50, height: 14 }), _jsx(Skeleton, { width: 70, height: 14 })] }), _jsx(Skeleton, { width: "70%", height: 12, style: { marginTop: Spacing.sm } })] })] }), _jsxs(View, { style: styles.priceRow, children: [_jsx(Skeleton, { width: 100, height: 12 }), _jsx(Skeleton, { width: 80, height: 22 }), _jsx(Skeleton, { width: "100%", height: 42, borderRadius: BorderRadius.md, style: { marginTop: Spacing.sm } })] })] }, i))) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        paddingHorizontal: Spacing.lg,
+    },
+    card: {
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.lg,
+        padding: Spacing.lg,
+        marginBottom: Spacing.md,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    cardRow: {
+        flexDirection: "row",
+        gap: Spacing.md,
+    },
+    imageCol: {
+        width: 120,
+    },
+    contentCol: {
+        flex: 1,
+    },
+    featuresRow: {
+        flexDirection: "row",
+        gap: Spacing.sm,
+        marginTop: Spacing.sm,
+    },
+    priceRow: {
+        borderTopWidth: 1,
+        borderTopColor: Colors.borderLight,
+        paddingTop: Spacing.md,
+        marginTop: Spacing.lg,
+        alignItems: "center",
+    },
+});
+export default CarsSkeleton;

package/dist/modules/search-form/cars/CarTopOffersSlider.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+type CarOffer = {
+    offer_id: string;
+    car?: {
+        name?: string;
+        image?: string;
+        category?: string;
+    };
+    price?: {
+        total?: number;
+        currency?: string;
+    };
+};
+type Props = {
+    offers: CarOffer[];
+    onCategorySelect?: (category: string | null) => void;
+    translations?: Record<string, string>;
+};
+declare const CarTopOffersSlider: React.FC<Props>;
+export default CarTopOffersSlider;

package/dist/modules/search-form/cars/CarTopOffersSlider.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useCallback } from "react";
+import { View, Text, TouchableOpacity, FlatList, Image, StyleSheet, Dimensions, } from "react-native";
+import { useWidget } from "../../../context/WidgetContext";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../../theme/colors";
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const CARD_WIDTH = SCREEN_WIDTH * 0.38;
+const CARD_SPACING = Spacing.sm;
+const CURRENCY_SIGNS = {
+    USD: "$",
+    EUR: "\u20AC",
+    GBP: "\u00A3",
+    CHF: "\u20A3",
+};
+const CarTopOffersSlider = ({ offers, onCategorySelect, translations = {}, }) => {
+    const { currency } = useWidget();
+    const [activeCategory, setActiveCategory] = useState(null);
+    const currencySign = CURRENCY_SIGNS[currency] || currency;
+    const bestByCategory = useMemo(() => {
+        const map = new Map();
+        offers.forEach((offer) => {
+            const rawCat = offer.car?.category?.toLowerCase();
+            if (!rawCat || rawCat === "other")
+                return;
+            const existing = map.get(rawCat);
+            if (!existing ||
+                (offer.price?.total || 0) < (existing.price?.total || Infinity)) {
+                map.set(rawCat, offer);
+            }
+        });
+        return Array.from(map.entries());
+    }, [offers]);
+    const handlePress = useCallback((cat) => {
+        const newCategory = activeCategory === cat ? null : cat;
+        setActiveCategory(newCategory);
+        onCategorySelect?.(newCategory);
+    }, [activeCategory, onCategorySelect]);
+    const renderItem = useCallback(({ item }) => {
+        const [category, offer] = item;
+        const cat = category.toLowerCase();
+        const car = offer.car || {};
+        const price = offer.price || {};
+        const isActive = activeCategory === cat;
+        return (_jsxs(TouchableOpacity, { style: [styles.card, isActive && styles.cardActive], onPress: () => handlePress(cat), activeOpacity: 0.8, children: [_jsx(Image, { source: { uri: car.image || undefined }, style: styles.cardImage, resizeMode: "contain" }), _jsxs(View, { style: styles.cardContent, children: [_jsx(Text, { style: styles.cardTitle, numberOfLines: 1, children: (translations[`car_category_${cat}`] ||
+                                translations[cat] ||
+                                cat).toUpperCase() }), _jsxs(Text, { style: styles.cardPrice, children: [currencySign, (price.total || 0).toFixed(2)] })] })] }));
+    }, [activeCategory, handlePress, currencySign, translations]);
+    const keyExtractor = useCallback((item) => item[0], []);
+    if (bestByCategory.length === 0)
+        return null;
+    return (_jsx(View, { style: styles.container, children: _jsx(FlatList, { data: bestByCategory, renderItem: renderItem, keyExtractor: keyExtractor, horizontal: true, showsHorizontalScrollIndicator: false, snapToInterval: CARD_WIDTH + CARD_SPACING, decelerationRate: "fast", contentContainerStyle: styles.listContent }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        marginVertical: Spacing.md,
+    },
+    listContent: {
+        paddingHorizontal: Spacing.lg,
+        gap: CARD_SPACING,
+    },
+    card: {
+        width: CARD_WIDTH,
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.lg,
+        overflow: "hidden",
+        borderWidth: 1,
+        borderColor: Colors.border,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    cardActive: {
+        borderColor: Colors.primary,
+        backgroundColor: Colors.primaryLight,
+    },
+    cardImage: {
+        width: "100%",
+        height: 80,
+        backgroundColor: Colors.surfaceSecondary,
+    },
+    cardContent: {
+        padding: Spacing.sm,
+        alignItems: "center",
+    },
+    cardTitle: {
+        fontSize: FontSize.xs,
+        fontWeight: "600",
+        color: Colors.text,
+        marginBottom: Spacing.xs,
+        letterSpacing: 0.5,
+    },
+    cardPrice: {
+        fontSize: FontSize.md,
+        fontWeight: "700",
+        color: Colors.primary,
+    },
+});
+export default CarTopOffersSlider;

package/dist/modules/search-form/cars/car-filters/CarFilters.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type CarFiltersProps = {
+    offers: any[];
+    onFilterChange?: (filtered: any[]) => void;
+    onFiltersApplied?: () => void;
+    translations: Record<string, string>;
+};
+export declare const CarFilters: React.FC<CarFiltersProps>;