@devtravelcode/widget-native 1.0.0

package/dist/modules/search-form/hotel/components/HotelPin.d.ts

@@ -0,0 +1,7 @@
+export type HotelPin = {
+    id: string;
+    latitude: number;
+    longitude: number;
+    total: number | null;
+    soldOut: boolean;
+};

package/dist/modules/search-form/hotel/components/HotelPin.js

@@ -0,0 +1 @@
+export {};

package/dist/modules/search-form/hotel/hotel-filters/HotelFilters.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+export declare const QUICK_FILTERS: ({
+    key: string;
+    type: string;
+    value: string;
+    labelKey: string;
+    fallback: string;
+} | {
+    key: string;
+    type: string;
+    value: number;
+    labelKey: string;
+    fallback: string;
+})[];
+type HotelFiltersProps = {
+    translations: Record<string, string>;
+    activeFilters: string[];
+    onQuickFilter: (key: string) => void;
+    onOpenPopup: () => void;
+    isPopupOpen: boolean;
+    onClosePopup: () => void;
+    onApplyFilters?: (sid: string | null, filters?: Record<string, any>) => Promise<void>;
+    onReset?: () => void;
+    externalValues?: Record<string, any>;
+    sessionId?: string | null;
+    filters?: string[];
+};
+declare const HotelFilters: React.FC<HotelFiltersProps>;
+export default HotelFilters;

package/dist/modules/search-form/hotel/hotel-filters/HotelFilters.js

@@ -0,0 +1,339 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { View, Text, TouchableOpacity, Modal, ScrollView, StyleSheet, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Svg, { Line } from "react-native-svg";
+import RangeBlock from "../../flight/flight-filters/RangeBlock";
+import { useWidget } from "../../../../context/WidgetContext";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../../../theme/colors";
+import { CloseIcon } from "../../../../store";
+export const QUICK_FILTERS = [
+    {
+        key: "AI",
+        type: "boards",
+        value: "AI",
+        labelKey: "filter_all_inclusive",
+        fallback: "All inclusive",
+    },
+    {
+        key: "BI",
+        type: "boards",
+        value: "BI",
+        labelKey: "filter_breakfast",
+        fallback: "Breakfast",
+    },
+    {
+        key: "4",
+        type: "starFrom",
+        value: 4,
+        labelKey: "filter_from_4_stars",
+        fallback: "From 4\u2605",
+    },
+    {
+        key: "full_refund",
+        type: "payments",
+        value: "full_refund",
+        labelKey: "filter_full_refund",
+        fallback: "Full refund",
+    },
+];
+const DEFAULT_VALUES = {
+    minPrice: 0,
+    maxPrice: 1000,
+    starRating: [],
+    boards: null,
+    payments: null,
+};
+const BOARD_OPTIONS = [
+    { code: "BI", labelKey: "filter_breakfast_included", fallback: "Breakfast included" },
+    { code: "LI", labelKey: "filter_lunch_included", fallback: "Lunch included" },
+    { code: "DI", labelKey: "filter_dinner_included", fallback: "Dinner included" },
+    { code: "FB", labelKey: "filter_full_board", fallback: "Full board" },
+    { code: "HB", labelKey: "filter_half_board", fallback: "Half board" },
+    { code: "AI", labelKey: "filter_all_inclusive", fallback: "All inclusive" },
+];
+const HotelFilters = ({ translations, activeFilters, onQuickFilter, onOpenPopup, isPopupOpen, onClosePopup, onApplyFilters, onReset, externalValues, sessionId = null, filters = [], }) => {
+    const { currency } = useWidget();
+    const insets = useSafeAreaInsets();
+    const [values, setValues] = useState({ ...DEFAULT_VALUES });
+    const [openSections, setOpenSections] = useState(["price"]);
+    const [scrollEnabled, setScrollEnabled] = useState(true);
+    const t = (key, fallback) => translations[key] || fallback;
+    const currencySigns = {
+        USD: "$",
+        EUR: "\u20AC",
+        GBP: "\u00A3",
+        CHF: "\u20A3",
+    };
+    const currencySign = currencySigns[currency] || currency;
+    const prevExternalRef = useRef("");
+    useEffect(() => {
+        if (!externalValues) {
+            if (prevExternalRef.current !== "") {
+                prevExternalRef.current = "";
+                setValues({ ...DEFAULT_VALUES });
+                setOpenSections(["price"]);
+            }
+            return;
+        }
+        const serialized = JSON.stringify(externalValues);
+        if (serialized === prevExternalRef.current)
+            return;
+        prevExternalRef.current = serialized;
+        setValues((prev) => ({ ...prev, ...externalValues }));
+        const sectionsToOpen = [];
+        if ((typeof externalValues.minPrice === "number" && externalValues.minPrice !== 0) ||
+            (typeof externalValues.maxPrice === "number" && externalValues.maxPrice !== 1000)) {
+            sectionsToOpen.push("price");
+        }
+        if (Array.isArray(externalValues.starRating) && externalValues.starRating.length > 0) {
+            sectionsToOpen.push("starRating");
+        }
+        if (externalValues.boards)
+            sectionsToOpen.push("boards");
+        if (externalValues.payments)
+            sectionsToOpen.push("payments");
+        setOpenSections(sectionsToOpen.length > 0 ? sectionsToOpen : ["price"]);
+    }, [externalValues]);
+    const getValue = (name, fallback) => {
+        return name in values ? values[name] : fallback;
+    };
+    const handleRangeChange = (name, value) => {
+        setValues((prev) => ({ ...prev, [name]: Number(value) }));
+    };
+    const getRangeStyle = (minName, maxName, maxValue) => {
+        const minVal = Number(getValue(minName, 0));
+        const maxVal = Number(getValue(maxName, maxValue));
+        const left = (minVal / maxValue) * 100;
+        const right = 100 - (maxVal / maxValue) * 100;
+        return { left: `${left}%`, right: `${right}%` };
+    };
+    const toggleSection = (key) => {
+        setOpenSections((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]);
+    };
+    const updateFilterValue = (name, value) => {
+        setValues((prev) => ({ ...prev, [name]: value }));
+    };
+    const handleApply = () => {
+        if (sessionId && onApplyFilters) {
+            onApplyFilters(sessionId, values);
+        }
+        onClosePopup();
+    };
+    const handleReset = () => {
+        setValues({ ...DEFAULT_VALUES });
+        setOpenSections(["price"]);
+        onReset?.();
+        onClosePopup();
+    };
+    const has = (key) => filters.includes(key);
+    const toggleStar = (stars) => {
+        const prev = Array.isArray(values.starRating) ? values.starRating : [];
+        const next = prev.includes(stars)
+            ? prev.filter((s) => s !== stars)
+            : Array.from(new Set([...prev, stars])).sort((a, b) => a - b);
+        updateFilterValue("starRating", next);
+    };
+    return (_jsxs(View, { children: [_jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.quickFiltersBar, contentContainerStyle: styles.quickFiltersContent, children: [_jsxs(TouchableOpacity, { style: styles.mainFilterChip, onPress: onOpenPopup, activeOpacity: 0.7, children: [_jsxs(Svg, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "#FFFFFF", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx(Line, { x1: 4, y1: 6, x2: 20, y2: 6 }), _jsx(Line, { x1: 8, y1: 12, x2: 16, y2: 12 }), _jsx(Line, { x1: 11, y1: 18, x2: 13, y2: 18 })] }), _jsx(Text, { style: styles.mainFilterText, children: t("filters_main", "Filters") })] }), QUICK_FILTERS.map((item) => (_jsx(TouchableOpacity, { style: [
+                            styles.filterChip,
+                            activeFilters.includes(item.key) && styles.filterChipActive,
+                        ], onPress: () => onQuickFilter(item.key), activeOpacity: 0.7, children: _jsx(Text, { style: [
+                                styles.filterChipText,
+                                activeFilters.includes(item.key) && styles.filterChipTextActive,
+                            ], children: t(item.labelKey, item.fallback) }) }, item.key)))] }), _jsx(Modal, { visible: isPopupOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: onClosePopup, children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.closeButton, onPress: onClosePopup, 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: t("filters_title", "Filters") }) }), _jsxs(ScrollView, { style: styles.modalContent, contentContainerStyle: styles.modalContentInner, showsVerticalScrollIndicator: false, scrollEnabled: scrollEnabled, children: [(has("price") || has("minprice") || has("maxprice")) && (_jsx(RangeBlock, { title: t("filter_price", "Price"), minName: "minPrice", maxName: "maxPrice", maxValue: 1000, step: 10, open: openSections.includes("price"), toggle: () => toggleSection("price"), getValue: getValue, handleRangeChange: handleRangeChange, getRangeStyle: getRangeStyle, formatter: (v) => `${v} ${currencySign}`, isShow: true, onDragStart: () => setScrollEnabled(false), onDragEnd: () => setScrollEnabled(true) })), has("starRating") && (_jsxs(View, { style: styles.section, children: [_jsx(View, { style: styles.sectionHeader, children: _jsx(Text, { style: styles.sectionTitle, children: t("filter_stars", "Number of stars") }) }), _jsx(View, { style: styles.sectionContent, children: [5, 4, 3, 2, 1].map((stars) => {
+                                                const isChecked = Array.isArray(values.starRating) &&
+                                                    values.starRating.includes(stars);
+                                                return (_jsxs(TouchableOpacity, { style: styles.checkboxRow, onPress: () => toggleStar(stars), activeOpacity: 0.7, children: [_jsx(View, { style: [
+                                                                styles.checkbox,
+                                                                isChecked && styles.checkboxChecked,
+                                                            ], children: isChecked && (_jsx(Text, { style: styles.checkmark, children: "\u2713" })) }), _jsxs(Text, { style: styles.checkboxLabel, children: [stars, " ", t("filter_stars_suffix", "stars")] })] }, stars));
+                                            }) })] })), has("payments") && (_jsxs(View, { style: styles.section, children: [_jsx(View, { style: styles.sectionHeader, children: _jsx(Text, { style: styles.sectionTitle, children: t("filter_payments", "Payment") }) }), _jsx(View, { style: styles.sectionContent, children: _jsxs(TouchableOpacity, { style: styles.checkboxRow, onPress: () => updateFilterValue("payments", values.payments === "full_refund" ? null : "full_refund"), activeOpacity: 0.7, children: [_jsx(View, { style: [
+                                                            styles.checkbox,
+                                                            values.payments === "full_refund" && styles.checkboxChecked,
+                                                        ], children: values.payments === "full_refund" && (_jsx(Text, { style: styles.checkmark, children: "\u2713" })) }), _jsx(Text, { style: styles.checkboxLabel, children: t("filter_full_refund", "Full refund") })] }) })] })), has("boards") && (_jsxs(View, { style: styles.section, children: [_jsx(View, { style: styles.sectionHeader, children: _jsx(Text, { style: styles.sectionTitle, children: t("filter_meals", "Meals") }) }), _jsxs(View, { style: styles.sectionContent, children: [_jsxs(TouchableOpacity, { style: styles.radioRow, onPress: () => updateFilterValue("boards", null), activeOpacity: 0.7, children: [_jsx(View, { style: [
+                                                                styles.radio,
+                                                                values.boards === null && styles.radioSelected,
+                                                            ], children: values.boards === null && (_jsx(View, { style: styles.radioInner })) }), _jsx(Text, { style: styles.checkboxLabel, children: t("filter_no_preference", "No preference") })] }), BOARD_OPTIONS.map((item) => (_jsxs(TouchableOpacity, { style: styles.radioRow, onPress: () => updateFilterValue("boards", item.code), activeOpacity: 0.7, children: [_jsx(View, { style: [
+                                                                styles.radio,
+                                                                values.boards === item.code && styles.radioSelected,
+                                                            ], children: values.boards === item.code && (_jsx(View, { style: styles.radioInner })) }), _jsx(Text, { style: styles.checkboxLabel, children: t(item.labelKey, item.fallback) })] }, item.code)))] })] }))] }), _jsxs(View, { style: styles.modalFooter, children: [_jsx(TouchableOpacity, { style: styles.resetButton, onPress: handleReset, activeOpacity: 0.7, children: _jsx(Text, { style: styles.resetButtonText, children: t("filter_reset_btn", "Reset") }) }), _jsx(TouchableOpacity, { style: styles.applyButton, onPress: handleApply, activeOpacity: 0.8, children: _jsx(Text, { style: styles.applyButtonText, children: t("filter_apply_btn", "Apply") }) })] })] }) })] }));
+};
+const styles = StyleSheet.create({
+    quickFiltersBar: {
+        marginBottom: Spacing.sm,
+    },
+    quickFiltersContent: {
+        flexDirection: "row",
+        gap: Spacing.sm,
+        paddingRight: Spacing.lg,
+    },
+    mainFilterChip: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: Colors.primary,
+        borderRadius: BorderRadius.full,
+        paddingVertical: Spacing.sm,
+        paddingHorizontal: Spacing.md,
+        gap: Spacing.xs,
+    },
+    mainFilterText: {
+        fontSize: FontSize.sm,
+        fontWeight: "600",
+        color: Colors.textOnPrimary,
+    },
+    filterChip: {
+        borderRadius: BorderRadius.full,
+        paddingVertical: Spacing.sm,
+        paddingHorizontal: Spacing.md,
+        borderWidth: 1,
+        borderColor: Colors.border,
+        backgroundColor: Colors.surface,
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    filterChipActive: {
+        backgroundColor: Colors.primaryLight,
+        borderColor: Colors.primary,
+    },
+    filterChipText: {
+        fontSize: FontSize.sm,
+        color: Colors.text,
+        fontWeight: "500",
+    },
+    filterChipTextActive: {
+        color: Colors.primary,
+        fontWeight: "600",
+    },
+    modalContainer: {
+        flex: 1,
+        backgroundColor: Colors.surface,
+    },
+    closeButton: {
+        alignSelf: "flex-end",
+        paddingHorizontal: Spacing.lg,
+        paddingBottom: Spacing.sm,
+        paddingTop: Spacing.sm,
+    },
+    modalHeader: {
+        paddingHorizontal: Spacing.lg,
+        paddingBottom: Spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.border,
+    },
+    modalTitle: {
+        fontSize: FontSize.lg,
+        fontWeight: "700",
+        color: Colors.text,
+    },
+    modalContent: {
+        flex: 1,
+    },
+    modalContentInner: {
+        padding: Spacing.lg,
+    },
+    modalFooter: {
+        flexDirection: "row",
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+        borderTopWidth: 1,
+        borderTopColor: Colors.borderLight,
+        gap: Spacing.md,
+    },
+    resetButton: {
+        flex: 1,
+        paddingVertical: Spacing.md,
+        borderRadius: BorderRadius.md,
+        borderWidth: 1,
+        borderColor: Colors.border,
+        alignItems: "center",
+    },
+    resetButtonText: {
+        fontSize: FontSize.md,
+        fontWeight: "600",
+        color: Colors.textSecondary,
+    },
+    applyButton: {
+        flex: 1,
+        paddingVertical: Spacing.md,
+        borderRadius: BorderRadius.md,
+        backgroundColor: Colors.primary,
+        alignItems: "center",
+    },
+    applyButtonText: {
+        fontSize: FontSize.md,
+        fontWeight: "600",
+        color: Colors.textOnPrimary,
+    },
+    section: {
+        marginBottom: Spacing.md,
+    },
+    sectionHeader: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingVertical: Spacing.md,
+    },
+    sectionTitle: {
+        fontSize: FontSize.md,
+        fontWeight: "600",
+        color: Colors.text,
+    },
+    sectionContent: {
+        paddingLeft: Spacing.sm,
+    },
+    checkboxRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: Spacing.sm,
+        gap: Spacing.md,
+    },
+    checkbox: {
+        width: 22,
+        height: 22,
+        borderRadius: BorderRadius.sm,
+        borderWidth: 2,
+        borderColor: Colors.border,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: Colors.surface,
+    },
+    checkboxChecked: {
+        backgroundColor: Colors.primary,
+        borderColor: Colors.primary,
+    },
+    checkmark: {
+        fontSize: FontSize.sm,
+        color: Colors.textOnPrimary,
+        fontWeight: "700",
+    },
+    checkboxLabel: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+    },
+    radioRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: Spacing.sm,
+        gap: Spacing.md,
+    },
+    radio: {
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        borderWidth: 2,
+        borderColor: Colors.border,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: Colors.surface,
+    },
+    radioSelected: {
+        borderColor: Colors.primary,
+    },
+    radioInner: {
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        backgroundColor: Colors.primary,
+    },
+});
+export default HotelFilters;

package/dist/modules/search-form/hotel/hotel-filters/HotelFiltersBar.d.ts

@@ -0,0 +1,3 @@
+export { QUICK_FILTERS } from "./HotelFilters";
+declare const _default: null;
+export default _default;

package/dist/modules/search-form/hotel/hotel-filters/HotelFiltersBar.js

@@ -0,0 +1,2 @@
+export { QUICK_FILTERS } from "./HotelFilters";
+export default null;

package/dist/modules/search-form/hotel/hotel-filters/HotelFiltersContent.d.ts

@@ -0,0 +1,2 @@
+declare const _default: null;
+export default _default;

package/dist/modules/search-form/hotel/hotel-filters/HotelFiltersContent.js

@@ -0,0 +1 @@
+export default null;

package/dist/modules/search-form/hotel/hotel-filters/HotelFiltersDynamic.d.ts

@@ -0,0 +1,2 @@
+declare const _default: null;
+export default _default;

package/dist/modules/search-form/hotel/hotel-filters/HotelFiltersDynamic.js

@@ -0,0 +1 @@
+export default null;

package/dist/modules/search-form/hotel/hotel-filters/HotelFiltersMobilePopup.d.ts

@@ -0,0 +1,2 @@
+declare const _default: null;
+export default _default;

package/dist/modules/search-form/hotel/hotel-filters/HotelFiltersMobilePopup.js

@@ -0,0 +1 @@
+export default null;

package/dist/modules/search-form/hotel/hotel-filters/RangeBlock.d.ts

@@ -0,0 +1 @@
+export { default } from "../../flight/flight-filters/RangeBlock";

package/dist/modules/search-form/hotel/hotel-filters/RangeBlock.js

@@ -0,0 +1 @@
+export { default } from "../../flight/flight-filters/RangeBlock";

package/dist/modules/search-form/hotel/hotel-filters/index.d.ts

@@ -0,0 +1 @@
+export { default as HotelFilters, QUICK_FILTERS } from "./HotelFilters";

package/dist/modules/search-form/hotel/hotel-filters/index.js

@@ -0,0 +1 @@
+export { default as HotelFilters, QUICK_FILTERS } from "./HotelFilters";

package/dist/modules/tabs/FlightsTab.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/modules/tabs/FlightsTab.js

@@ -0,0 +1 @@
+export {};

package/dist/modules/tabs/HotelsTab.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/modules/tabs/HotelsTab.js

@@ -0,0 +1 @@
+export {};

package/dist/store/index.d.ts

@@ -0,0 +1,22 @@
+export declare const setParams: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "search/setParams">, setLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "search/setLoading">, setResults: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "search/setResults">;
+declare const store: import("@reduxjs/toolkit").EnhancedStore<{
+    search: {
+        params: {};
+        results: never[];
+        loading: boolean;
+    };
+}, import("redux").UnknownAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
+    dispatch: import("redux-thunk").ThunkDispatch<{
+        search: {
+            params: {};
+            results: never[];
+            loading: boolean;
+        };
+    }, undefined, import("redux").UnknownAction>;
+}>, import("redux").StoreEnhancer]>>;
+export { FlightIcon } from "../icons/FlightIcon";
+export { HotelIcon } from "../icons/HotelIcon";
+export { CarIcon } from "../icons/CarIcon";
+export { CloseIcon } from "../icons/CloseIcon";
+export type RootState = ReturnType<typeof store.getState>;
+export default store;

package/dist/store/index.js

@@ -0,0 +1,19 @@
+import { configureStore, createSlice } from "@reduxjs/toolkit";
+const searchSlice = createSlice({
+    name: "search",
+    initialState: { params: {}, results: [], loading: false },
+    reducers: {
+        setParams: (s, a) => { s.params = { ...s.params, ...a.payload }; },
+        setLoading: (s, a) => { s.loading = a.payload; },
+        setResults: (s, a) => { s.results = a.payload; }
+    }
+});
+export const { setParams, setLoading, setResults } = searchSlice.actions;
+const store = configureStore({
+    reducer: { search: searchSlice.reducer }
+});
+export { FlightIcon } from "../icons/FlightIcon";
+export { HotelIcon } from "../icons/HotelIcon";
+export { CarIcon } from "../icons/CarIcon";
+export { CloseIcon } from "../icons/CloseIcon";
+export default store;

package/dist/theme/colors.d.ts

@@ -0,0 +1,56 @@
+export declare const Colors: {
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    secondary: string;
+    bannerBg: string;
+    bannerText: string;
+    inputBg: string;
+    label: string;
+    background: string;
+    surface: string;
+    surfaceSecondary: string;
+    text: string;
+    textSecondary: string;
+    textTertiary: string;
+    textOnPrimary: string;
+    border: string;
+    borderLight: string;
+    borderFocus: string;
+    success: string;
+    warning: string;
+    error: string;
+    skeleton: string;
+    skeletonHighlight: string;
+    overlay: string;
+    white: string;
+    black: string;
+    transparent: string;
+};
+export declare const Spacing: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+};
+export declare const BorderRadius: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    full: number;
+};
+export declare const FontSize: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+    heading: number;
+};

package/dist/theme/colors.js

@@ -0,0 +1,56 @@
+export const Colors = {
+    primary: '#306DDE',
+    primaryLight: 'rgba(48,109,222,0.1)',
+    primaryDark: '#2558B5',
+    secondary: '#437dea',
+    bannerBg: '#BED3FC',
+    bannerText: '#496293',
+    inputBg: '#F4F7FD',
+    label: '#ABABC8',
+    background: '#F5F5F5',
+    surface: '#FFFFFF',
+    surfaceSecondary: '#F8F9FA',
+    text: '#1A1A2E',
+    textSecondary: '#5B5D6C',
+    textTertiary: '#9CA3AF',
+    textOnPrimary: '#FFFFFF',
+    border: '#E4E6EE',
+    borderLight: '#EBEDF2',
+    borderFocus: '#306DDE',
+    success: '#1a8917',
+    warning: '#F59E0B',
+    error: '#EF4444',
+    skeleton: '#E5E7EB',
+    skeletonHighlight: '#F3F4F6',
+    overlay: 'rgba(0,0,0,0.5)',
+    white: '#FFFFFF',
+    black: '#000000',
+    transparent: 'transparent',
+};
+export const Spacing = {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+    xxl: 24,
+    xxxl: 32,
+};
+export const BorderRadius = {
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    xxl: 24,
+    full: 9999,
+};
+export const FontSize = {
+    xs: 10,
+    sm: 12,
+    md: 14,
+    lg: 16,
+    xl: 18,
+    xxl: 20,
+    xxxl: 24,
+    heading: 28,
+};

package/dist/theme/formStyles.d.ts

@@ -0,0 +1,76 @@
+export declare const formStyles: {
+    formCard: {
+        backgroundColor: string;
+        borderRadius: number;
+        padding: number;
+        gap: number;
+        marginHorizontal: number;
+        marginTop: number;
+    };
+    label: {
+        color: string;
+        fontWeight: "600";
+        fontSize: number;
+        marginBottom: number;
+    };
+    inputTrigger: {
+        backgroundColor: string;
+        borderRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        minHeight: number;
+        justifyContent: "center";
+    };
+    inputTriggerRow: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+    };
+    inputTriggerText: {
+        fontSize: number;
+        color: string;
+        flex: number;
+        fontWeight: "400";
+    };
+    inputTriggerPlaceholder: {
+        color: string;
+    };
+    inputTriggerCode: {
+        fontSize: number;
+        color: string;
+        fontWeight: "400";
+        marginLeft: number;
+    };
+    searchButton: {
+        borderRadius: number;
+        paddingVertical: number;
+        alignItems: "center";
+        justifyContent: "center";
+        minHeight: number;
+    };
+    searchButtonDisabled: {
+        opacity: number;
+    };
+    searchButtonContent: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+    searchButtonText: {
+        color: string;
+        fontSize: number;
+        fontWeight: "500";
+    };
+    errorText: {
+        fontSize: number;
+        color: string;
+        marginTop: number;
+        fontWeight: "500";
+    };
+    searchError: {
+        fontSize: number;
+        color: string;
+        textAlign: "center";
+        padding: number;
+    };
+};