mautourco-components 0.2.5 → 0.2.7

package/dist/components/molecules/Calendar/DateTime.js

@@ -1,106 +1,106 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { Calendar } from "../../ui/calendar";
-import { Button } from "../../ui/button";
-import TimePicker from "./TimePicker";
-import Icon from "../../atoms/Icon/Icon";
-var DateTime = function (_a) {
-    var _b, _c, _d;
-    var _e = _a.mode, mode = _e === void 0 ? "both" : _e, _f = _a.selectionMode, selectionMode = _f === void 0 ? "range" : _f, _g = _a.numberOfMonths, numberOfMonths = _g === void 0 ? 2 : _g, _h = _a.disableBeforeToday, disableBeforeToday = _h === void 0 ? true : _h, _j = _a.disableToday, disableToday = _j === void 0 ? false : _j, defaultDateRange = _a.defaultDateRange, defaultTime = _a.defaultTime, onChange = _a.onChange;
-    var _k = useState(defaultDateRange), dateRange = _k[0], setDateRange = _k[1];
-    var _l = useState((_b = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.hour) !== null && _b !== void 0 ? _b : "12"), hours = _l[0], setHours = _l[1];
-    var _m = useState((_c = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.minute) !== null && _c !== void 0 ? _c : "00"), minutes = _m[0], setMinutes = _m[1];
-    var _o = useState((_d = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.meridiem) !== null && _d !== void 0 ? _d : "AM"), amPm = _o[0], setAmPm = _o[1];
-    // notify parent when date or time changes
-    useEffect(function () {
-        onChange === null || onChange === void 0 ? void 0 : onChange({
-            dateRange: dateRange !== null && dateRange !== void 0 ? dateRange : undefined,
-            time: mode === "calendar" ? undefined : { hour: hours, minute: minutes, meridiem: amPm },
-        });
-    }, [dateRange, hours, minutes, amPm, onChange, mode]);
-    var handleSelect = function (val) {
-        if (!val) {
-            setDateRange(undefined);
-            return;
-        }
-        if (val instanceof Date) {
-            setDateRange({ from: val, to: val });
-            return;
-        }
-        if (Array.isArray(val)) {
-            var sorted = val.slice().sort(function (a, b) { return +a - +b; });
-            setDateRange({ from: sorted[0], to: sorted[sorted.length - 1] });
-            return;
-        }
-        setDateRange(val);
-    };
-    var resetTime = function () {
-        setHours("12");
-        setMinutes("00");
-        setAmPm("AM");
-    };
-    var clearSelection = function () {
-        setDateRange(undefined);
-        resetTime();
-    };
-    var selectToday = function () {
-        var today = new Date();
-        today.setHours(0, 0, 0, 0);
-        setDateRange({ from: today, to: today });
-    };
-    var calendarMode = selectionMode === "single" ? "single" : "range";
-    var buildDisabled = function () {
-        var disabled = [];
-        if (disableBeforeToday) {
-            var today = new Date();
-            today.setHours(0, 0, 0, 0);
-            disabled.push({ before: today });
-        }
-        if (disableToday) {
-            var today = new Date();
-            today.setHours(0, 0, 0, 0);
-            disabled.push(today);
-        }
-        return disabled.length ? disabled : undefined;
-    };
-    var disabledDays = buildDisabled();
-    return (_jsxs("div", __assign({ className: "calendar--dropdown" }, { children: [mode !== "time" && (function () {
-                var calendarProps = {
-                    mode: calendarMode,
-                    selected: dateRange,
-                    onSelect: handleSelect,
-                    weekStartsOn: 1,
-                    showOutsideDays: false,
-                    numberOfMonths: numberOfMonths,
-                    disabled: disabledDays,
-                    className: "p-0",
-                    formatters: {
-                        formatWeekdayName: function (weekday, options) {
-                            var _a;
-                            return weekday
-                                .toLocaleDateString((_a = options === null || options === void 0 ? void 0 : options.locale) === null || _a === void 0 ? void 0 : _a.code, { weekday: "short" })
-                                .toUpperCase();
-                        },
-                    },
-                };
-                return _jsx(Calendar, __assign({}, calendarProps));
-            })(), mode !== "calendar" && (_jsx("div", __assign({ className: "".concat(mode === "both" ? "calendar--time_container_separated" : "") }, { children: _jsx(TimePicker, { label: "Time", hour: hours, minute: minutes, meridiem: amPm, onChange: function (h, m, mm) {
-                        var hh = String(Math.max(0, Math.min(12, Number(h || 0)))).padStart(2, "0");
-                        var mmn = String(Math.max(0, Math.min(59, Number(m || 0)))).padStart(2, "0");
-                        setHours(hh);
-                        setMinutes(mmn);
-                        setAmPm(mm);
-                    } }) }))), mode !== "time" && (_jsxs("div", __assign({ className: "calendar--footer" }, { children: [_jsxs(Button, __assign({ variant: "ghost", size: "sm", onClick: selectToday, type: "button", className: "calendar--footer--button", disabled: disableToday }, { children: [_jsx(Icon, { name: "calendar-outline", size: "sm" }), "Today"] })), _jsx(Button, __assign({ variant: "ghost", size: "sm", onClick: clearSelection, type: "button", className: "calendar--footer--button" }, { children: "Clear" }))] })))] })));
-};
-export default DateTime;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Calendar } from "../../ui/calendar";
+import { Button } from "../../ui/button";
+import TimePicker from "./TimePicker";
+import Icon from "../../atoms/Icon/Icon";
+var DateTime = function (_a) {
+    var _b, _c, _d;
+    var _e = _a.mode, mode = _e === void 0 ? "both" : _e, _f = _a.selectionMode, selectionMode = _f === void 0 ? "range" : _f, _g = _a.numberOfMonths, numberOfMonths = _g === void 0 ? 2 : _g, _h = _a.disableBeforeToday, disableBeforeToday = _h === void 0 ? true : _h, _j = _a.disableToday, disableToday = _j === void 0 ? false : _j, defaultDateRange = _a.defaultDateRange, defaultTime = _a.defaultTime, onChange = _a.onChange;
+    var _k = useState(defaultDateRange), dateRange = _k[0], setDateRange = _k[1];
+    var _l = useState((_b = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.hour) !== null && _b !== void 0 ? _b : "12"), hours = _l[0], setHours = _l[1];
+    var _m = useState((_c = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.minute) !== null && _c !== void 0 ? _c : "00"), minutes = _m[0], setMinutes = _m[1];
+    var _o = useState((_d = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.meridiem) !== null && _d !== void 0 ? _d : "AM"), amPm = _o[0], setAmPm = _o[1];
+    // notify parent when date or time changes
+    useEffect(function () {
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            dateRange: dateRange !== null && dateRange !== void 0 ? dateRange : undefined,
+            time: mode === "calendar" ? undefined : { hour: hours, minute: minutes, meridiem: amPm },
+        });
+    }, [dateRange, hours, minutes, amPm, onChange, mode]);
+    var handleSelect = function (val) {
+        if (!val) {
+            setDateRange(undefined);
+            return;
+        }
+        if (val instanceof Date) {
+            setDateRange({ from: val, to: val });
+            return;
+        }
+        if (Array.isArray(val)) {
+            var sorted = val.slice().sort(function (a, b) { return +a - +b; });
+            setDateRange({ from: sorted[0], to: sorted[sorted.length - 1] });
+            return;
+        }
+        setDateRange(val);
+    };
+    var resetTime = function () {
+        setHours("12");
+        setMinutes("00");
+        setAmPm("AM");
+    };
+    var clearSelection = function () {
+        setDateRange(undefined);
+        resetTime();
+    };
+    var selectToday = function () {
+        var today = new Date();
+        today.setHours(0, 0, 0, 0);
+        setDateRange({ from: today, to: today });
+    };
+    var calendarMode = selectionMode === "single" ? "single" : "range";
+    var buildDisabled = function () {
+        var disabled = [];
+        if (disableBeforeToday) {
+            var today = new Date();
+            today.setHours(0, 0, 0, 0);
+            disabled.push({ before: today });
+        }
+        if (disableToday) {
+            var today = new Date();
+            today.setHours(0, 0, 0, 0);
+            disabled.push(today);
+        }
+        return disabled.length ? disabled : undefined;
+    };
+    var disabledDays = buildDisabled();
+    return (_jsxs("div", __assign({ className: "calendar--dropdown" }, { children: [mode !== "time" && (function () {
+                var calendarProps = {
+                    mode: calendarMode,
+                    selected: dateRange,
+                    onSelect: handleSelect,
+                    weekStartsOn: 1,
+                    showOutsideDays: false,
+                    numberOfMonths: numberOfMonths,
+                    disabled: disabledDays,
+                    className: "p-0",
+                    formatters: {
+                        formatWeekdayName: function (weekday, options) {
+                            var _a;
+                            return weekday
+                                .toLocaleDateString((_a = options === null || options === void 0 ? void 0 : options.locale) === null || _a === void 0 ? void 0 : _a.code, { weekday: "short" })
+                                .toUpperCase();
+                        },
+                    },
+                };
+                return _jsx(Calendar, __assign({}, calendarProps));
+            })(), mode !== "calendar" && (_jsx("div", __assign({ className: "".concat(mode === "both" ? "calendar--time_container_separated" : "") }, { children: _jsx(TimePicker, { label: "Time", hour: hours, minute: minutes, meridiem: amPm, onChange: function (h, m, mm) {
+                        var hh = String(Math.max(0, Math.min(12, Number(h || 0)))).padStart(2, "0");
+                        var mmn = String(Math.max(0, Math.min(59, Number(m || 0)))).padStart(2, "0");
+                        setHours(hh);
+                        setMinutes(mmn);
+                        setAmPm(mm);
+                    } }) }))), mode !== "time" && (_jsxs("div", __assign({ className: "calendar--footer" }, { children: [_jsxs(Button, __assign({ variant: "ghost", size: "sm", onClick: selectToday, type: "button", className: "calendar--footer--button", disabled: disableToday }, { children: [_jsx(Icon, { name: "calendar-outline", size: "sm" }), "Today"] })), _jsx(Button, __assign({ variant: "ghost", size: "sm", onClick: clearSelection, type: "button", className: "calendar--footer--button" }, { children: "Clear" }))] })))] })));
+};
+export default DateTime;

package/dist/components/molecules/Calendar/TimePicker.d.ts

@@ -1,16 +1,16 @@
-import React from "react";
-export interface TimePickerProps {
-    label?: string;
-    hour?: string;
-    minute?: string;
-    meridiem?: "AM" | "PM";
-    state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
-    disabled?: boolean;
-    errorMessage?: string;
-    successMessage?: string;
-    onChange?: (hour: string, minute: string, meridiem: "AM" | "PM") => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-}
-declare const TimePicker: React.FC<TimePickerProps>;
-export default TimePicker;
+import React from "react";
+export interface TimePickerProps {
+    label?: string;
+    hour?: string;
+    minute?: string;
+    meridiem?: "AM" | "PM";
+    state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
+    disabled?: boolean;
+    errorMessage?: string;
+    successMessage?: string;
+    onChange?: (hour: string, minute: string, meridiem: "AM" | "PM") => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+declare const TimePicker: React.FC<TimePickerProps>;
+export default TimePicker;

package/dist/components/molecules/Calendar/TimePicker.js

@@ -1,91 +1,91 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-var clampTwoDigits = function (val) {
-    return val.replace(/\D/g, "").slice(-2);
-};
-var TimePicker = function (_a) {
-    var _b = _a.label, label = _b === void 0 ? "Time" : _b, _c = _a.hour, hour = _c === void 0 ? "" : _c, _d = _a.minute, minute = _d === void 0 ? "" : _d, _e = _a.meridiem, meridiem = _e === void 0 ? "AM" : _e, _f = _a.state, state = _f === void 0 ? "default" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur;
-    var _h = useState(hour), localHour = _h[0], setLocalHour = _h[1];
-    var _j = useState(minute), localMinute = _j[0], setLocalMinute = _j[1];
-    var _k = useState(meridiem), localMeridiem = _k[0], setLocalMeridiem = _k[1];
-    var _l = useState(false), isFocused = _l[0], setIsFocused = _l[1];
-    var _m = useState(false), isTyping = _m[0], setIsTyping = _m[1];
-    // Keep local state in sync when parent props change (e.g. Clear button)
-    useEffect(function () {
-        if (hour !== localHour)
-            setLocalHour(hour);
-    }, [hour]);
-    useEffect(function () {
-        if (minute !== localMinute)
-            setLocalMinute(minute);
-    }, [minute]);
-    useEffect(function () {
-        if (meridiem !== localMeridiem)
-            setLocalMeridiem(meridiem);
-    }, [meridiem]);
-    var finalState = disabled ? "disabled" : state;
-    var displayState = isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
-    var emitChange = function (h, m, mm) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(h, m, mm);
-    };
-    var handleHourChange = function (e) {
-        var raw = clampTwoDigits(e.target.value);
-        if (raw === "") {
-            setLocalHour("");
-            setIsTyping(true);
-            emitChange("", localMinute, localMeridiem);
-            return;
-        }
-        var num = Number(raw || 0);
-        if (num > 12)
-            num = 12;
-        var val = String(num).padStart(2, "0");
-        setLocalHour(val);
-        setIsTyping(true);
-        emitChange(val, localMinute, localMeridiem);
-    };
-    var handleMinuteChange = function (e) {
-        var raw = clampTwoDigits(e.target.value);
-        if (raw === "") {
-            setLocalMinute("");
-            setIsTyping(true);
-            emitChange(localHour, "", localMeridiem);
-            return;
-        }
-        var num = Number(raw || 0);
-        if (num > 59)
-            num = 59;
-        var val = String(num).padStart(2, "0");
-        setLocalMinute(val);
-        setIsTyping(true);
-        emitChange(localHour, val, localMeridiem);
-    };
-    var handleMeridiemClick = function (value) {
-        if (disabled)
-            return;
-        setLocalMeridiem(value);
-        emitChange(localHour, localMinute, value);
-    };
-    var handleFocus = function () {
-        setIsFocused(true);
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-    };
-    var handleBlur = function () {
-        setIsFocused(false);
-        setIsTyping(false);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    };
-    return (_jsxs("div", __assign({ className: "time-picker-wrapper", "data-state": displayState }, { children: [label && _jsx("div", __assign({ className: "time-picker__div" }, { children: label })), _jsxs("div", __assign({ className: "time-picker time-picker--".concat(displayState) }, { children: [_jsx("input", { className: "time-picker__input", type: "text", inputMode: "numeric", pattern: "[0-9]*", value: localHour, placeholder: "00", onChange: handleHourChange, onFocus: handleFocus, onBlur: handleBlur, disabled: disabled, "aria-label": "Hour", "data-unit": "hour" }), _jsx("div", __assign({ className: "time-picker__colon" }, { children: ":" })), _jsx("input", { className: "time-picker__input", type: "text", inputMode: "numeric", pattern: "[0-9]*", value: localMinute, placeholder: "00", onChange: handleMinuteChange, onFocus: handleFocus, onBlur: handleBlur, disabled: disabled, "aria-label": "Minute", "data-unit": "minute" }), _jsxs("div", __assign({ className: "time-picker__am-pm", role: "tablist", "aria-label": "AM/PM selector" }, { children: [_jsx("button", __assign({ type: "button", className: "time-picker__seg time-picker__seg--left ".concat(localMeridiem === "AM" ? "time-picker__seg--selected" : ""), onClick: function () { return handleMeridiemClick("AM"); }, disabled: disabled, "aria-pressed": localMeridiem === "AM" }, { children: "AM" })), _jsx("button", __assign({ type: "button", className: "time-picker__seg time-picker__seg--right ".concat(localMeridiem === "PM" ? "time-picker__seg--selected" : ""), onClick: function () { return handleMeridiemClick("PM"); }, disabled: disabled, "aria-pressed": localMeridiem === "PM" }, { children: "PM" }))] }))] }))] })));
-};
-export default TimePicker;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+var clampTwoDigits = function (val) {
+    return val.replace(/\D/g, "").slice(-2);
+};
+var TimePicker = function (_a) {
+    var _b = _a.label, label = _b === void 0 ? "Time" : _b, _c = _a.hour, hour = _c === void 0 ? "" : _c, _d = _a.minute, minute = _d === void 0 ? "" : _d, _e = _a.meridiem, meridiem = _e === void 0 ? "AM" : _e, _f = _a.state, state = _f === void 0 ? "default" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur;
+    var _h = useState(hour), localHour = _h[0], setLocalHour = _h[1];
+    var _j = useState(minute), localMinute = _j[0], setLocalMinute = _j[1];
+    var _k = useState(meridiem), localMeridiem = _k[0], setLocalMeridiem = _k[1];
+    var _l = useState(false), isFocused = _l[0], setIsFocused = _l[1];
+    var _m = useState(false), isTyping = _m[0], setIsTyping = _m[1];
+    // Keep local state in sync when parent props change (e.g. Clear button)
+    useEffect(function () {
+        if (hour !== localHour)
+            setLocalHour(hour);
+    }, [hour]);
+    useEffect(function () {
+        if (minute !== localMinute)
+            setLocalMinute(minute);
+    }, [minute]);
+    useEffect(function () {
+        if (meridiem !== localMeridiem)
+            setLocalMeridiem(meridiem);
+    }, [meridiem]);
+    var finalState = disabled ? "disabled" : state;
+    var displayState = isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
+    var emitChange = function (h, m, mm) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(h, m, mm);
+    };
+    var handleHourChange = function (e) {
+        var raw = clampTwoDigits(e.target.value);
+        if (raw === "") {
+            setLocalHour("");
+            setIsTyping(true);
+            emitChange("", localMinute, localMeridiem);
+            return;
+        }
+        var num = Number(raw || 0);
+        if (num > 12)
+            num = 12;
+        var val = String(num).padStart(2, "0");
+        setLocalHour(val);
+        setIsTyping(true);
+        emitChange(val, localMinute, localMeridiem);
+    };
+    var handleMinuteChange = function (e) {
+        var raw = clampTwoDigits(e.target.value);
+        if (raw === "") {
+            setLocalMinute("");
+            setIsTyping(true);
+            emitChange(localHour, "", localMeridiem);
+            return;
+        }
+        var num = Number(raw || 0);
+        if (num > 59)
+            num = 59;
+        var val = String(num).padStart(2, "0");
+        setLocalMinute(val);
+        setIsTyping(true);
+        emitChange(localHour, val, localMeridiem);
+    };
+    var handleMeridiemClick = function (value) {
+        if (disabled)
+            return;
+        setLocalMeridiem(value);
+        emitChange(localHour, localMinute, value);
+    };
+    var handleFocus = function () {
+        setIsFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    };
+    var handleBlur = function () {
+        setIsFocused(false);
+        setIsTyping(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    };
+    return (_jsxs("div", __assign({ className: "time-picker-wrapper", "data-state": displayState }, { children: [label && _jsx("div", __assign({ className: "time-picker__div" }, { children: label })), _jsxs("div", __assign({ className: "time-picker time-picker--".concat(displayState) }, { children: [_jsx("input", { className: "time-picker__input", type: "text", inputMode: "numeric", pattern: "[0-9]*", value: localHour, placeholder: "00", onChange: handleHourChange, onFocus: handleFocus, onBlur: handleBlur, disabled: disabled, "aria-label": "Hour", "data-unit": "hour" }), _jsx("div", __assign({ className: "time-picker__colon" }, { children: ":" })), _jsx("input", { className: "time-picker__input", type: "text", inputMode: "numeric", pattern: "[0-9]*", value: localMinute, placeholder: "00", onChange: handleMinuteChange, onFocus: handleFocus, onBlur: handleBlur, disabled: disabled, "aria-label": "Minute", "data-unit": "minute" }), _jsxs("div", __assign({ className: "time-picker__am-pm", role: "tablist", "aria-label": "AM/PM selector" }, { children: [_jsx("button", __assign({ type: "button", className: "time-picker__seg time-picker__seg--left ".concat(localMeridiem === "AM" ? "time-picker__seg--selected" : ""), onClick: function () { return handleMeridiemClick("AM"); }, disabled: disabled, "aria-pressed": localMeridiem === "AM" }, { children: "AM" })), _jsx("button", __assign({ type: "button", className: "time-picker__seg time-picker__seg--right ".concat(localMeridiem === "PM" ? "time-picker__seg--selected" : ""), onClick: function () { return handleMeridiemClick("PM"); }, disabled: disabled, "aria-pressed": localMeridiem === "PM" }, { children: "PM" }))] }))] }))] })));
+};
+export default TimePicker;

package/dist/components/molecules/LocationDropdown/LocationDropdown.d.ts

@@ -1,34 +1,34 @@
-import React from 'react';
-import '../../../styles/components/molecule/location-dropdown.css';
-export interface LocationOption {
-    id: string | number;
-    label: string;
-    type: 'airport' | 'port' | 'accommodation';
-    disabled?: boolean;
-}
-export interface LocationGroup {
-    id: string;
-    label: string;
-    options: LocationOption[];
-}
-export interface LocationData {
-    id: string | number;
-    locationName: string;
-}
-export interface LocationDropdownProps {
-    options?: LocationOption[];
-    groups?: LocationGroup[];
-    selectedValue?: string | number | null;
-    placeholder?: string;
-    label?: string;
-    onSelectionChange: (location: LocationData | null) => void;
-    disabled?: boolean;
-    error?: boolean;
-    className?: string;
-    type?: 'airport-port' | 'accommodation' | 'pickup-dropoff';
-    maxHeight?: number;
-    direction?: 'pickup' | 'dropoff';
-    showGroupTitles?: boolean;
-}
-declare const LocationDropdown: React.FC<LocationDropdownProps>;
-export default LocationDropdown;
+import React from 'react';
+import '../../../styles/components/molecule/location-dropdown.css';
+export interface LocationOption {
+    id: string | number;
+    label: string;
+    type: 'airport' | 'port' | 'accommodation';
+    disabled?: boolean;
+}
+export interface LocationGroup {
+    id: string;
+    label: string;
+    options: LocationOption[];
+}
+export interface LocationData {
+    id: string | number;
+    locationName: string;
+}
+export interface LocationDropdownProps {
+    options?: LocationOption[];
+    groups?: LocationGroup[];
+    selectedValue?: string | number | null;
+    placeholder?: string;
+    label?: string;
+    onSelectionChange: (location: LocationData | null) => void;
+    disabled?: boolean;
+    error?: boolean;
+    className?: string;
+    type?: 'airport-port' | 'accommodation' | 'pickup-dropoff';
+    maxHeight?: number;
+    direction?: 'pickup' | 'dropoff';
+    showGroupTitles?: boolean;
+}
+declare const LocationDropdown: React.FC<LocationDropdownProps>;
+export default LocationDropdown;