@devtravelcode/widget-native 1.0.0

package/dist/modules/search-form/flight/DatePicker.js

@@ -0,0 +1,536 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from "react";
+import { View, Text, TouchableOpacity, Modal, ScrollView, StyleSheet, Dimensions, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Svg, { Path } from "react-native-svg";
+import { format, parse, isBefore, isAfter, startOfMonth, endOfMonth, startOfDay, addMonths, addDays, isSameDay, isWithinInterval, } from "date-fns";
+import { ru, enUS } from "date-fns/locale";
+import { useWidget } from "../../../context/WidgetContext";
+import { Colors, Spacing, BorderRadius, FontSize } from "../../../theme/colors";
+import { formStyles } from "../../../theme/formStyles";
+import { CloseIcon } from "../../../store";
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const DAY_SIZE = Math.floor((SCREEN_WIDTH - Spacing.lg * 2) / 7);
+const ChevronLeft = ({ color = Colors.textTertiary }) => (_jsx(Svg, { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", children: _jsx(Path, { d: "M4 7.5 9.5 2l1.25 1.25L6 8l4.75 4.75L9.5 14 4 8.5z", fill: color }) }));
+const ChevronRight = ({ color = Colors.textTertiary }) => (_jsx(Svg, { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", children: _jsx(Path, { d: "M12 8.5 6.5 14l-1.25-1.25L10 8 5.25 3.25 6.5 2 12 7.5z", fill: color }) }));
+const DatePicker = ({ lang, value, onChange, minDate, maxDate, translations, mode = "flight", }) => {
+    const { dateTimeFormat } = useWidget();
+    const insets = useSafeAreaInsets();
+    const [isOpen, setIsOpen] = useState(false);
+    const [currentMonth, setCurrentMonth] = useState(new Date());
+    const [oneWay, setOneWay] = useState(false);
+    const [activeField, setActiveField] = useState(null);
+    const [monthSelectionMode, setMonthSelectionMode] = useState(false);
+    const today = startOfDay(new Date());
+    const displayFormat = useMemo(() => {
+        return dateTimeFormat === "usa" ? "MMMM d" : "d MMMM";
+    }, [dateTimeFormat]);
+    const headerFormat = useMemo(() => (lang === "en" ? "MMMM yyyy" : "LLLL yyyy"), [lang]);
+    const locale = useMemo(() => (lang === "en" ? enUS : ru), [lang]);
+    const weekdays = useMemo(() => {
+        const monday = new Date(2020, 0, 6);
+        return Array.from({ length: 7 }).map((_, i) => {
+            const name = format(addDays(monday, i), "EEE", { locale });
+            return name.slice(0, 2);
+        });
+    }, [locale]);
+    const monthNames = useMemo(() => {
+        return Array.from({ length: 12 }).map((_, i) => format(new Date(2020, i, 1), "LLLL", { locale }));
+    }, [locale]);
+    const min = minDate ? new Date(minDate) : today;
+    const max = maxDate ? new Date(maxDate) : null;
+    const selectedStart = value[0] ? parse(value[0], "yyyy-MM-dd", new Date()) : null;
+    const selectedEnd = value[1] ? parse(value[1], "yyyy-MM-dd", new Date()) : null;
+    let depLabelFinal;
+    let retLabelFinal;
+    if (mode === "hotel") {
+        depLabelFinal = translations["check_in"] || (lang === "en" ? "Check-in" : "Check-in");
+        retLabelFinal = translations["check_out"] || (lang === "en" ? "Check-out" : "Check-out");
+    }
+    else if (mode === "car") {
+        depLabelFinal = translations["pick-up"] || (lang === "en" ? "Pick-up date" : "Pick-up date");
+        retLabelFinal = translations["drop-off"] || (lang === "en" ? "Drop-off date" : "Drop-off date");
+    }
+    else {
+        depLabelFinal = translations["departure_date"] || (lang === "en" ? "Departure" : "Departure");
+        retLabelFinal = translations["return_date"] || (lang === "en" ? "Return" : "Return");
+    }
+    const depPlaceholder = translations["departure_placeholder"] || (lang === "en" ? "Departure" : "When");
+    const retPlaceholder = translations["return_placeholder"] || (lang === "en" ? "Return" : "Return");
+    const onewayText = oneWay
+        ? translations["with_return"] || (lang === "en" ? "Add return trip" : "Add return trip")
+        : translations["no_return_ticket"] || (lang === "en" ? "One-way only" : "One-way only");
+    const formatDateDisplay = (dateStr) => {
+        if (!dateStr)
+            return "";
+        const parsed = parse(dateStr, "yyyy-MM-dd", new Date());
+        return isNaN(parsed.getTime()) ? "" : format(parsed, displayFormat, { locale });
+    };
+    const formatMobileDisplay = (dateStr) => {
+        if (!dateStr)
+            return "";
+        const parsed = parse(dateStr, "yyyy-MM-dd", new Date());
+        const mobileFormat = lang === "en" ? "MMM d" : "d MMMM";
+        return isNaN(parsed.getTime()) ? "" : format(parsed, mobileFormat, { locale });
+    };
+    const openPicker = (field) => {
+        if (field === "return" && !value[0])
+            return;
+        if (field === "return" && oneWay) {
+            setOneWay(false);
+        }
+        setActiveField(field);
+        let targetDateStr = null;
+        if (field === "return") {
+            targetDateStr = value[1] || value[0];
+        }
+        else {
+            targetDateStr = value[0] || null;
+        }
+        if (targetDateStr) {
+            const parsed = parse(targetDateStr, "yyyy-MM-dd", new Date());
+            if (!isNaN(parsed.getTime())) {
+                setCurrentMonth(startOfMonth(parsed));
+            }
+        }
+        else {
+            setCurrentMonth(startOfMonth(new Date()));
+        }
+        setIsOpen(true);
+        setMonthSelectionMode(false);
+    };
+    const closePicker = () => {
+        if (oneWay && value[1]) {
+            onChange([value[0] || "", ""]);
+        }
+        setIsOpen(false);
+        setActiveField(null);
+        setMonthSelectionMode(false);
+    };
+    const handleDateClick = useCallback((date) => {
+        if (activeField === "departure") {
+            onChange([format(date, "yyyy-MM-dd"), ""]);
+            if (!oneWay) {
+                setActiveField("return");
+            }
+            else {
+                setIsOpen(false);
+                setActiveField(null);
+            }
+            return;
+        }
+        if (activeField === "return") {
+            const depDate = value[0] ? parse(value[0], "yyyy-MM-dd", new Date()) : null;
+            if (mode === "hotel" && depDate && isSameDay(date, depDate)) {
+                return;
+            }
+            if (depDate && isBefore(date, depDate)) {
+                onChange([format(date, "yyyy-MM-dd"), value[0]]);
+            }
+            else {
+                onChange([value[0], format(date, "yyyy-MM-dd")]);
+            }
+            setIsOpen(false);
+            setActiveField(null);
+        }
+    }, [activeField, oneWay, value, mode, onChange]);
+    const toggleOneWay = () => {
+        if (oneWay) {
+            setOneWay(false);
+            setActiveField("return");
+        }
+        else {
+            onChange([value[0] || "", ""]);
+            setOneWay(true);
+            setIsOpen(false);
+            setActiveField(null);
+        }
+    };
+    const handleClear = () => {
+        onChange(["", ""]);
+        setOneWay(false);
+        setActiveField("departure");
+        setMonthSelectionMode(false);
+    };
+    const renderMonthSelector = () => {
+        const currentYear = currentMonth.getFullYear();
+        return (_jsxs(View, { style: styles.monthSelectorContainer, children: [_jsxs(View, { style: styles.monthSelectorHeader, children: [_jsx(TouchableOpacity, { onPress: () => setCurrentMonth(addMonths(currentMonth, -12)), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(ChevronLeft, {}) }), _jsx(Text, { style: styles.monthSelectorYear, children: currentYear }), _jsx(TouchableOpacity, { onPress: () => setCurrentMonth(addMonths(currentMonth, 12)), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(ChevronRight, {}) })] }), _jsx(View, { style: styles.monthGrid, children: monthNames.map((name, index) => {
+                        const monthDate = new Date(currentYear, index, 1);
+                        const isDisabled = isBefore(monthDate, startOfMonth(today)) &&
+                            monthDate.getFullYear() === today.getFullYear();
+                        const isActive = currentMonth.getMonth() === index;
+                        return (_jsx(TouchableOpacity, { disabled: isDisabled, style: [
+                                styles.monthBtn,
+                                isActive && styles.monthBtnActive,
+                                isDisabled && styles.monthBtnDisabled,
+                            ], onPress: () => {
+                                if (isDisabled)
+                                    return;
+                                setCurrentMonth(new Date(currentYear, index, 1));
+                                setMonthSelectionMode(false);
+                            }, activeOpacity: 0.7, children: _jsx(Text, { style: [
+                                    styles.monthBtnText,
+                                    isActive && styles.monthBtnTextActive,
+                                    isDisabled && styles.monthBtnTextDisabled,
+                                ], children: name }) }, name));
+                    }) })] }));
+    };
+    const renderMonth = (monthStart) => {
+        const firstDayOfMonth = startOfMonth(monthStart);
+        const lastDayOfMonth = endOfMonth(firstDayOfMonth);
+        const firstWeekday = (firstDayOfMonth.getDay() + 6) % 7;
+        const dayCells = [];
+        for (let i = 0; i < firstWeekday; i++) {
+            dayCells.push(_jsx(View, { style: styles.dayCell }, `empty-${i}`));
+        }
+        let day = new Date(firstDayOfMonth);
+        while (day <= lastDayOfMonth) {
+            const cellDate = new Date(day);
+            const isDisabled = isBefore(cellDate, today) ||
+                (min && isBefore(cellDate, min)) ||
+                (max && isAfter(cellDate, max)) ||
+                (selectedStart && activeField === "return" && isBefore(cellDate, selectedStart));
+            const isSelectedStart = selectedStart && isSameDay(cellDate, selectedStart);
+            const isSelectedEnd = selectedEnd && isSameDay(cellDate, selectedEnd);
+            let isInRange = false;
+            if (selectedStart && selectedEnd) {
+                isInRange = isWithinInterval(cellDate, {
+                    start: selectedStart,
+                    end: selectedEnd,
+                });
+            }
+            const isOneDay = selectedStart && !selectedEnd && isSameDay(cellDate, selectedStart);
+            dayCells.push(_jsx(TouchableOpacity, { disabled: !!isDisabled, style: [
+                    styles.dayCell,
+                    isInRange && !isSelectedStart && !isSelectedEnd && styles.dayInRange,
+                    isSelectedStart && styles.daySelected,
+                    isSelectedEnd && styles.daySelected,
+                    isOneDay && styles.dayOneDay,
+                    isSelectedStart && selectedEnd && styles.daySelectedStart,
+                    isSelectedEnd && selectedStart && styles.daySelectedEnd,
+                ], onPress: () => !isDisabled && handleDateClick(cellDate), activeOpacity: 0.7, children: _jsx(Text, { style: [
+                        styles.dayText,
+                        isDisabled && styles.dayTextDisabled,
+                        (isSelectedStart || isSelectedEnd) && styles.dayTextSelected,
+                    ], children: format(cellDate, "d", { locale }) }) }, cellDate.getTime()));
+            day = addDays(day, 1);
+        }
+        return (_jsxs(View, { style: styles.monthContainer, children: [_jsx(TouchableOpacity, { style: styles.monthHeader, onPress: () => setMonthSelectionMode(true), activeOpacity: 0.7, children: _jsx(Text, { style: styles.monthHeaderText, children: format(firstDayOfMonth, headerFormat, { locale }) }) }), _jsx(View, { style: styles.weekdayRow, children: weekdays.map((d, i) => (_jsx(View, { style: styles.weekdayCell, children: _jsx(Text, { style: styles.weekdayText, children: d }) }, `${d}-${i}`))) }), _jsx(View, { style: styles.dayGrid, children: dayCells })] }, firstDayOfMonth.getTime()));
+    };
+    const renderCalendarContent = () => {
+        const months = [];
+        for (let i = 0; i < 12; i++) {
+            months.push(renderMonth(addMonths(currentMonth, i)));
+        }
+        return months;
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.dateInputsWrapper, children: [_jsxs(View, { style: styles.dateInputsRow, children: [_jsxs(TouchableOpacity, { style: [
+                                    styles.dateField,
+                                    activeField === "departure" && styles.dateFieldActive,
+                                ], onPress: () => openPicker("departure"), activeOpacity: 0.8, children: [_jsx(Text, { style: formStyles.label, children: depLabelFinal }), _jsx(Text, { style: [styles.dateFieldValue, !value[0] && styles.dateFieldPlaceholder], children: value[0] ? formatDateDisplay(value[0]) : depPlaceholder })] }), _jsxs(TouchableOpacity, { style: [
+                                    styles.dateField,
+                                    activeField === "return" && styles.dateFieldActive,
+                                    !value[0] && styles.dateFieldDisabled,
+                                    oneWay && styles.dateFieldSoftDisabled,
+                                ], onPress: () => openPicker("return"), activeOpacity: value[0] ? 0.8 : 1, children: [_jsx(Text, { style: formStyles.label, children: retLabelFinal }), _jsx(Text, { style: [
+                                            styles.dateFieldValue,
+                                            (!value[1] || oneWay) && styles.dateFieldPlaceholder,
+                                        ], children: oneWay
+                                            ? translations["no_return_short"] || "One-way"
+                                            : value[1]
+                                                ? formatDateDisplay(value[1])
+                                                : retPlaceholder })] })] }), (value[0] || value[1]) && (_jsx(TouchableOpacity, { style: styles.clearButton, onPress: handleClear, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, {}) }))] }), _jsx(Modal, { visible: isOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: closePicker, children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.modalCloseButton, onPress: closePicker, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), _jsxs(View, { style: styles.modalDateInputs, children: [_jsxs(TouchableOpacity, { style: [
+                                        styles.modalDateField,
+                                        activeField === "departure" && styles.modalDateFieldActive,
+                                    ], onPress: () => setActiveField("departure"), children: [_jsx(Text, { style: styles.modalDateFieldLabel, children: lang === "en" ? "Departure" : depLabelFinal }), _jsx(Text, { style: styles.modalDateFieldValue, children: value[0] ? formatMobileDisplay(value[0]) : (lang === "en" ? "Choose date" : "Choose") })] }), _jsxs(TouchableOpacity, { style: [
+                                        styles.modalDateField,
+                                        (oneWay || !value[0]) && styles.modalDateFieldDisabled,
+                                        activeField === "return" && styles.modalDateFieldActive,
+                                    ], onPress: () => {
+                                        if (oneWay || !value[0])
+                                            return;
+                                        setActiveField("return");
+                                    }, children: [_jsx(Text, { style: styles.modalDateFieldLabel, children: lang === "en" ? "Return" : retLabelFinal }), _jsx(Text, { style: styles.modalDateFieldValue, children: oneWay
+                                                ? (lang === "en" ? "Not needed" : "One-way")
+                                                : !value[0]
+                                                    ? (lang === "en" ? "Choose date" : "Choose")
+                                                    : value[1]
+                                                        ? formatMobileDisplay(value[1])
+                                                        : (lang === "en" ? "Choose date" : "Choose") })] }), (value[0] || value[1]) && (_jsx(TouchableOpacity, { style: styles.modalClearButton, onPress: () => {
+                                        handleClear();
+                                        setActiveField("departure");
+                                    }, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, {}) }))] }), _jsx(ScrollView, { style: styles.calendarScrollView, showsVerticalScrollIndicator: false, children: monthSelectionMode
+                                ? renderMonthSelector()
+                                : (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.navRow, children: [_jsx(TouchableOpacity, { disabled: isBefore(addMonths(currentMonth, -1), startOfMonth(today)), onPress: () => setCurrentMonth((prev) => startOfMonth(addMonths(prev, -1))), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, style: [
+                                                        styles.navButton,
+                                                        isBefore(addMonths(currentMonth, -1), startOfMonth(today)) && styles.navButtonDisabled,
+                                                    ], children: _jsx(ChevronLeft, {}) }), _jsx(TouchableOpacity, { onPress: () => setCurrentMonth((prev) => startOfMonth(addMonths(prev, 1))), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, style: styles.navButton, children: _jsx(ChevronRight, {}) })] }), renderCalendarContent()] })) }), mode === "flight" && (_jsx(View, { style: styles.onewayContainer, children: _jsx(TouchableOpacity, { style: [styles.onewayBtn, oneWay && styles.onewayBtnActive], onPress: toggleOneWay, activeOpacity: 0.7, children: _jsx(Text, { style: [
+                                        styles.onewayBtnText,
+                                        oneWay && styles.onewayBtnTextActive,
+                                    ], children: onewayText }) }) }))] }) })] }));
+};
+const styles = StyleSheet.create({
+    dateInputsWrapper: {
+        position: "relative",
+    },
+    dateInputsRow: {
+        flexDirection: "column",
+        gap: Spacing.lg,
+    },
+    dateField: {
+        flex: 1,
+        backgroundColor: Colors.inputBg,
+        borderRadius: BorderRadius.lg,
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+        minHeight: 56,
+    },
+    dateFieldActive: {
+        backgroundColor: Colors.primaryLight,
+    },
+    dateFieldDisabled: {
+        opacity: 0.5,
+    },
+    dateFieldSoftDisabled: {
+        opacity: 0.6,
+    },
+    dateFieldValue: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        fontWeight: "400",
+    },
+    dateFieldPlaceholder: {
+        color: Colors.textTertiary,
+        fontWeight: "400",
+    },
+    clearButton: {
+        position: "absolute",
+        right: 0,
+        top: 14,
+        width: 28,
+        height: 28,
+        borderRadius: BorderRadius.full,
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1,
+        marginRight: 5,
+    },
+    modalContainer: {
+        flex: 1,
+        backgroundColor: Colors.surface,
+    },
+    modalCloseButton: {
+        alignSelf: "flex-end",
+        padding: Spacing.lg,
+    },
+    modalCloseText: {
+        fontSize: FontSize.xl,
+        color: Colors.textSecondary,
+        fontWeight: "600",
+    },
+    modalDateInputs: {
+        flexDirection: "row",
+        paddingHorizontal: Spacing.lg,
+        paddingBottom: Spacing.md,
+        gap: Spacing.sm,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.border,
+        alignItems: "center",
+    },
+    modalDateField: {
+        flex: 1,
+        paddingVertical: Spacing.sm,
+        paddingHorizontal: Spacing.md,
+        borderRadius: BorderRadius.md,
+        borderWidth: 1,
+        borderColor: Colors.transparent,
+    },
+    modalDateFieldActive: {
+        borderColor: Colors.primary,
+        backgroundColor: Colors.primaryLight,
+    },
+    modalDateFieldDisabled: {
+        opacity: 0.4,
+    },
+    modalDateFieldLabel: {
+        fontSize: FontSize.xs,
+        color: Colors.textTertiary,
+        fontWeight: "500",
+    },
+    modalDateFieldValue: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        fontWeight: "500",
+        marginTop: 2,
+    },
+    modalClearButton: {
+        width: 28,
+        height: 28,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    calendarScrollView: {
+        flex: 1,
+        paddingHorizontal: Spacing.lg,
+    },
+    navRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        paddingVertical: Spacing.md,
+    },
+    navButton: {
+        padding: Spacing.sm,
+    },
+    navButtonDisabled: {
+        opacity: 0.3,
+    },
+    monthContainer: {
+        marginBottom: Spacing.xxl,
+    },
+    monthHeader: {
+        paddingVertical: Spacing.md,
+        alignItems: "center",
+    },
+    monthHeaderText: {
+        fontSize: FontSize.lg,
+        fontWeight: "600",
+        color: Colors.text,
+        textTransform: "capitalize",
+    },
+    weekdayRow: {
+        flexDirection: "row",
+        marginBottom: Spacing.xs,
+    },
+    weekdayCell: {
+        flex: 1,
+        alignItems: "center",
+        paddingVertical: Spacing.xs,
+    },
+    weekdayText: {
+        fontSize: FontSize.xs,
+        color: Colors.textTertiary,
+        fontWeight: "600",
+        textTransform: "capitalize",
+    },
+    dayGrid: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+    },
+    dayCell: {
+        width: `${100 / 7}%`,
+        height: 40,
+        aspectRatio: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    dayText: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+    },
+    dayTextDisabled: {
+        color: Colors.textTertiary,
+        opacity: 0.4,
+    },
+    dayTextSelected: {
+        color: Colors.textOnPrimary,
+        fontWeight: "600",
+    },
+    daySelected: {
+        backgroundColor: Colors.primary,
+        borderRadius: BorderRadius.full,
+    },
+    dayOneDay: {
+        backgroundColor: Colors.primary,
+        borderRadius: BorderRadius.full,
+    },
+    daySelectedStart: {
+        borderTopLeftRadius: BorderRadius.full,
+        borderBottomLeftRadius: BorderRadius.full,
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+    },
+    daySelectedEnd: {
+        borderTopRightRadius: BorderRadius.full,
+        borderBottomRightRadius: BorderRadius.full,
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+    },
+    dayInRange: {
+        backgroundColor: Colors.primaryLight,
+    },
+    monthSelectorContainer: {
+        paddingVertical: Spacing.lg,
+    },
+    monthSelectorHeader: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingVertical: Spacing.md,
+    },
+    monthSelectorYear: {
+        fontSize: FontSize.xl,
+        fontWeight: "600",
+        color: Colors.text,
+    },
+    monthGrid: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: Spacing.sm,
+        marginTop: Spacing.lg,
+    },
+    monthBtn: {
+        width: "30%",
+        paddingVertical: Spacing.md,
+        alignItems: "center",
+        borderRadius: BorderRadius.md,
+        borderWidth: 1,
+        borderColor: Colors.border,
+    },
+    monthBtnActive: {
+        backgroundColor: Colors.primary,
+        borderColor: Colors.primary,
+    },
+    monthBtnDisabled: {
+        opacity: 0.3,
+    },
+    monthBtnText: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        textTransform: "capitalize",
+    },
+    monthBtnTextActive: {
+        color: Colors.textOnPrimary,
+        fontWeight: "600",
+    },
+    monthBtnTextDisabled: {
+        color: Colors.textTertiary,
+    },
+    onewayContainer: {
+        paddingTop: Spacing.sm,
+        paddingBottom: Spacing.lg,
+        paddingHorizontal: Spacing.lg,
+        borderTopWidth: 1,
+        borderTopColor: Colors.border,
+    },
+    onewayBtn: {
+        width: "100%",
+        paddingVertical: Spacing.md,
+        paddingHorizontal: Spacing.lg,
+        borderRadius: BorderRadius.md,
+        backgroundColor: Colors.surfaceSecondary,
+        alignItems: "center",
+    },
+    onewayBtnActive: {
+        backgroundColor: Colors.primaryLight,
+    },
+    onewayBtnText: {
+        fontSize: 15,
+        color: Colors.text,
+        fontWeight: "500",
+    },
+    onewayBtnTextActive: {
+        color: Colors.primary,
+        fontWeight: "500",
+    },
+});
+export default DatePicker;

package/dist/modules/search-form/flight/FlightSearchForm.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { useSearchExpiration } from "../../hooks/useSearchExpiration";
+type FlightSearchFormProps = {
+    startSearch: (params: any) => Promise<any>;
+    loading: boolean;
+    error: string | null;
+    currency: string;
+    translations?: Record<string, string>;
+    defaults?: {
+        from?: string;
+        to?: string;
+    } | null;
+    isPreview: boolean;
+    expiration: ReturnType<typeof useSearchExpiration>;
+    hasSearched: boolean;
+};
+declare const FlightSearchForm: React.FC<FlightSearchFormProps>;
+export default FlightSearchForm;