mautourco-components 0.2.64 → 0.2.66

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

@@ -15,6 +15,8 @@ export interface AgeSelectorProps {
     className?: string;
     /** Placeholder text */
     placeholder?: string;
+    /** Whether to show error state */
+    error?: boolean;
 }
 declare const AgeSelector: React.FC<AgeSelectorProps>;
 export default AgeSelector;

package/dist/components/molecules/AgeSelector/AgeSelector.js

@@ -4,9 +4,9 @@ import '../../../styles/components/molecule/age-selector.css';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 var AgeSelector = function (_a) {
-    var label = _a.label, value = _a.value, onChange = _a.onChange, ageRange = _a.ageRange, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.placeholder, placeholder = _d === void 0 ? '--' : _d;
-    var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = useState(value !== undefined ? value.toString() : ''), inputValue = _f[0], setInputValue = _f[1];
+    var label = _a.label, value = _a.value, onChange = _a.onChange, ageRange = _a.ageRange, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.placeholder, placeholder = _d === void 0 ? '--' : _d, _e = _a.error, error = _e === void 0 ? false : _e;
+    var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = useState(value !== undefined ? value.toString() : ''), inputValue = _g[0], setInputValue = _g[1];
     var containerRef = useRef(null);
     var inputRef = useRef(null);
     // Sync input value when prop value changes
@@ -75,7 +75,7 @@ var AgeSelector = function (_a) {
         setIsOpen(!isOpen);
     };
     var ageOptions = ageRange.map(function (age) { return age.toString(); });
-    return (_jsxs("div", { className: "age-selector ".concat(className), ref: containerRef, children: [_jsxs(Text, { size: "sm", variant: "regular", className: "age-selector__label", children: [label, required && _jsx("span", { className: "age-selector__required", children: " *" })] }), _jsxs("div", { className: "age-selector__container", children: [_jsxs("div", { className: "age-selector__input ".concat(isOpen ? 'age-selector__input--open' : '', " ").concat(value !== undefined ? 'age-selector__input--selected' : 'age-selector__input--default'), children: [_jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", className: "age-selector__input-field", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, onFocus: function () { return setIsOpen(false); }, placeholder: placeholder, "aria-label": "".concat(label, " age") }), _jsx("button", { type: "button", className: "age-selector__dropdown-btn", onClick: function (e) {
+    return (_jsxs("div", { className: "age-selector ".concat(className), ref: containerRef, children: [_jsxs(Text, { size: "sm", variant: "regular", className: "age-selector__label", children: [label, required && _jsx("span", { className: "age-selector__required", children: " *" })] }), _jsxs("div", { className: "age-selector__container", children: [_jsxs("div", { className: "age-selector__input ".concat(isOpen ? 'age-selector__input--open' : '', " ").concat(value !== undefined ? 'age-selector__input--selected' : 'age-selector__input--default', " ").concat(error && value === undefined ? 'age-selector__input--error' : ''), children: [_jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", className: "age-selector__input-field", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, onFocus: function () { return setIsOpen(false); }, placeholder: placeholder, "aria-label": "".concat(label, " age") }), _jsx("button", { type: "button", className: "age-selector__dropdown-btn", onClick: function (e) {
                                     e.preventDefault();
                                     e.stopPropagation();
                                     handleDropdownToggle();

package/dist/components/molecules/TooltipDisplay/TooltipDisplay.js

@@ -3,5 +3,5 @@ import { Text } from '../../atoms/Typography/Typography';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
 export function TooltipDisplay(props) {
     var children = props.children, content = props.content, _a = props.side, side = _a === void 0 ? 'right' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? '300px' : _b;
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { className: "text-[var(--color-icon-branded)]", asChild: true, children: children }), _jsx(TooltipContent, { className: "max-w-[".concat(maxWidth, "]"), side: side, style: { maxWidth: maxWidth }, children: _jsx(Text, { variant: "medium", size: "sm", className: "!text-white", children: content }) })] }));
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { className: "text-[var(--color-icon-branded)]", children: children }), _jsx(TooltipContent, { className: "max-w-[".concat(maxWidth, "]"), side: side, style: { maxWidth: maxWidth }, children: _jsx(Text, { variant: "medium", size: "sm", className: "!text-white", children: content }) })] }));
 }

package/dist/components/organisms/PaxSelector/PaxSelector.d.ts

@@ -64,6 +64,8 @@ export interface PaxSelectorProps {
     scrollOnOpen?: boolean;
     /** Age range for child categories */
     ageRange?: number[];
+    /** Whether to check if age inputs are empty and show error state */
+    checkEmpty?: boolean;
 }
 export declare const DEFAULT_PAX_DATA_WITH_ADULTS: PaxData;
 export declare const CHILD_CATEGORY_AGES: number[];

package/dist/components/organisms/PaxSelector/PaxSelector.js

@@ -85,7 +85,7 @@ var ClientTypeSelector = function (_a) {
     return (_jsxs("div", { className: "pax-selector__client-type", children: [_jsx(Text, { size: "sm", variant: "regular", className: "pax-selector__client-type-label", children: "Client type" }), _jsxs("div", { className: "pax-selector__client-type-select", ref: containerRef, children: [_jsxs("button", { type: "button", className: "pax-selector__client-type-trigger", onClick: function () { return setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "listbox", children: [_jsxs("div", { className: "pax-selector__client-type-content", children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__client-type-icon" }), _jsx("span", { className: "pax-selector__client-type-text", children: value })] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "pax-selector__client-type-chevron ".concat(isOpen ? 'pax-selector__client-type-chevron--open' : '') })] }), isOpen && (_jsx("div", { className: "pax-selector__client-type-dropdown", role: "listbox", children: CLIENT_TYPES.map(function (type) { return (_jsxs("button", { type: "button", className: "pax-selector__client-type-option ".concat(value === type ? 'pax-selector__client-type-option--selected' : ''), onClick: function () { return handleSelect(type); }, role: "option", "aria-selected": value === type, children: [_jsx(Icon, { name: "user-icon", size: "sm" }), type] }, type)); }) }))] })] }));
 };
 var RoomEditor = function (_a) {
-    var room = _a.room, roomNumber = _a.roomNumber, showRemove = _a.showRemove, maxAdults = _a.maxAdults, maxTeens = _a.maxTeens, maxChildren = _a.maxChildren, maxInfants = _a.maxInfants, onChange = _a.onChange, onRemove = _a.onRemove, scrollToRef = _a.scrollToRef, ageRange = _a.ageRange;
+    var room = _a.room, roomNumber = _a.roomNumber, showRemove = _a.showRemove, maxAdults = _a.maxAdults, maxTeens = _a.maxTeens, maxChildren = _a.maxChildren, maxInfants = _a.maxInfants, onChange = _a.onChange, onRemove = _a.onRemove, scrollToRef = _a.scrollToRef, ageRange = _a.ageRange, _b = _a.checkEmpty, checkEmpty = _b === void 0 ? false : _b;
     var roomAgesSectionRef = useRef(null);
     var previousRoomCounts = useRef({ teens: 0, children: 0, infants: 0 });
     var handleFieldChange = function (field, value) {
@@ -167,26 +167,26 @@ var RoomEditor = function (_a) {
                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                 return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) {
                                                         return handleAgeChange('teenAges', actualIndex, selectedAge);
-                                                    }, ageRange: ageRange, required: true }, "teen-".concat(actualIndex)));
+                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "teen-".concat(actualIndex)));
                                             }) }, "teen-chunk-".concat(chunkIndex))); }), room.children > 0 &&
                                         childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                 return (_jsx(AgeSelector, { label: "Child", value: age, onChange: function (selectedAge) {
                                                         return handleAgeChange('childAges', actualIndex, selectedAge);
-                                                    }, ageRange: ageRange, required: true }, "child-".concat(actualIndex)));
+                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "child-".concat(actualIndex)));
                                             }) }, "child-chunk-".concat(chunkIndex))); }), room.infants > 0 &&
                                         infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                 return (_jsx(AgeSelector, { label: "Infant", value: age, onChange: function (selectedAge) {
                                                         return handleAgeChange('infantAges', actualIndex, selectedAge);
-                                                    }, ageRange: ageRange, required: true }, "infant-".concat(actualIndex)));
+                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "infant-".concat(actualIndex)));
                                             }) }, "infant-chunk-".concat(chunkIndex))); })] })] })), _jsx(ClientTypeSelector, { value: room.clientType, onChange: function (val) { return handleFieldChange('clientType', val); } })] })] }));
 };
 var PaxSelector = function (_a) {
-    var _b = _a.label, label = _b === void 0 ? 'Number of pax' : _b, value = _a.value, onChange = _a.onChange, onAddRoom = _a.onAddRoom, onDone = _a.onDone, _c = _a.placeholder, placeholder = _c === void 0 ? 'Select pax' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.maxAdults, maxAdults = _e === void 0 ? 10 : _e, _f = _a.maxTeens, maxTeens = _f === void 0 ? 10 : _f, _g = _a.maxChildren, maxChildren = _g === void 0 ? 10 : _g, _h = _a.maxInfants, maxInfants = _h === void 0 ? 10 : _h, _j = _a.showAddRoom, showAddRoom = _j === void 0 ? true : _j, _k = _a.multipleRooms, multipleRooms = _k === void 0 ? false : _k, defaultRooms = _a.defaultRooms, onRoomsChange = _a.onRoomsChange, onRemoveRoom = _a.onRemoveRoom, _l = _a.defaultPaxData, defaultPaxData = _l === void 0 ? DEFAULT_PAX_DATA_WITH_ADULTS : _l, _m = _a.ageRange, ageRange = _m === void 0 ? CHILD_CATEGORY_AGES : _m, _o = _a.scrollOnOpen, scrollOnOpen = _o === void 0 ? false : _o, _p = _a.disabled, disabled = _p === void 0 ? false : _p;
-    var _q = useState(false), isOpen = _q[0], setIsOpen = _q[1];
-    var _r = useState(value || defaultPaxData || DEFAULT_PAX_DATA), internalData = _r[0], setInternalData = _r[1];
-    var _s = useState(defaultRooms || [__assign(__assign({}, DEFAULT_PAX_DATA), { roomId: '1' })]), rooms = _s[0], setRooms = _s[1];
+    var _b = _a.label, label = _b === void 0 ? 'Number of pax' : _b, value = _a.value, onChange = _a.onChange, onAddRoom = _a.onAddRoom, onDone = _a.onDone, _c = _a.placeholder, placeholder = _c === void 0 ? 'Select pax' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.maxAdults, maxAdults = _e === void 0 ? 10 : _e, _f = _a.maxTeens, maxTeens = _f === void 0 ? 10 : _f, _g = _a.maxChildren, maxChildren = _g === void 0 ? 10 : _g, _h = _a.maxInfants, maxInfants = _h === void 0 ? 10 : _h, _j = _a.showAddRoom, showAddRoom = _j === void 0 ? true : _j, _k = _a.multipleRooms, multipleRooms = _k === void 0 ? false : _k, defaultRooms = _a.defaultRooms, onRoomsChange = _a.onRoomsChange, onRemoveRoom = _a.onRemoveRoom, _l = _a.defaultPaxData, defaultPaxData = _l === void 0 ? DEFAULT_PAX_DATA_WITH_ADULTS : _l, _m = _a.ageRange, ageRange = _m === void 0 ? CHILD_CATEGORY_AGES : _m, _o = _a.scrollOnOpen, scrollOnOpen = _o === void 0 ? false : _o, _p = _a.disabled, disabled = _p === void 0 ? false : _p, _q = _a.checkEmpty, checkEmpty = _q === void 0 ? false : _q;
+    var _r = useState(false), isOpen = _r[0], setIsOpen = _r[1];
+    var _s = useState(value || defaultPaxData || DEFAULT_PAX_DATA), internalData = _s[0], setInternalData = _s[1];
+    var _t = useState(defaultRooms || [__assign(__assign({}, DEFAULT_PAX_DATA), { roomId: '1' })]), rooms = _t[0], setRooms = _t[1];
     var containerRef = useRef(null);
     var triggerRef = useRef(null);
     var hasInitialized = useRef(false);
@@ -252,11 +252,76 @@ var PaxSelector = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [internalData.teens, internalData.children, internalData.infants, multipleRooms]);
+    // Helper function to check if all ages are filled
+    var areAllAgesFilled = function () {
+        if (multipleRooms) {
+            // Check all rooms
+            for (var _i = 0, rooms_1 = rooms; _i < rooms_1.length; _i++) {
+                var room = rooms_1[_i];
+                if (room.teens > 0) {
+                    var teenAges = room.teenAges || [];
+                    for (var i = 0; i < room.teens; i++) {
+                        if (teenAges[i] === undefined || teenAges[i] === null)
+                            return false;
+                    }
+                }
+                if (room.children > 0) {
+                    var childAges = room.childAges || [];
+                    for (var i = 0; i < room.children; i++) {
+                        if (childAges[i] === undefined || childAges[i] === null)
+                            return false;
+                    }
+                }
+                if (room.infants > 0) {
+                    var infantAges = room.infantAges || [];
+                    for (var i = 0; i < room.infants; i++) {
+                        if (infantAges[i] === undefined || infantAges[i] === null)
+                            return false;
+                    }
+                }
+            }
+        }
+        else {
+            // Check single room mode
+            if (internalData.teens > 0) {
+                var teenAges = internalData.teenAges || [];
+                for (var i = 0; i < internalData.teens; i++) {
+                    if (teenAges[i] === undefined || teenAges[i] === null)
+                        return false;
+                }
+            }
+            if (internalData.children > 0) {
+                var childAges = internalData.childAges || [];
+                for (var i = 0; i < internalData.children; i++) {
+                    if (childAges[i] === undefined || childAges[i] === null)
+                        return false;
+                }
+            }
+            if (internalData.infants > 0) {
+                var infantAges = internalData.infantAges || [];
+                for (var i = 0; i < internalData.infants; i++) {
+                    if (infantAges[i] === undefined || infantAges[i] === null)
+                        return false;
+                }
+            }
+        }
+        return true;
+    };
+    // Check if there are any minors that need age specification
+    var hasMinorsWithoutAges = function () {
+        if (multipleRooms) {
+            return rooms.some(function (room) { return room.teens > 0 || room.children > 0 || room.infants > 0; });
+        }
+        return internalData.teens > 0 || internalData.children > 0 || internalData.infants > 0;
+    };
     // Handle clicks outside the dropdown
     useEffect(function () {
         var handleClickOutside = function (event) {
             if (containerRef.current && !containerRef.current.contains(event.target)) {
-                setIsOpen(false);
+                // Only close if all ages are filled (when there are minors)
+                if (!hasMinorsWithoutAges() || areAllAgesFilled()) {
+                    setIsOpen(false);
+                }
             }
         };
         if (isOpen) {
@@ -265,7 +330,7 @@ var PaxSelector = function (_a) {
         return function () {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [isOpen]);
+    }, [isOpen, internalData, rooms, multipleRooms]);
     // Scroll to input when dropdown opens (if scrollOnOpen is true)
     useEffect(function () {
         scrollIntoViewOnOpen(triggerRef, isOpen, scrollOnOpen);
@@ -324,8 +389,11 @@ var PaxSelector = function (_a) {
         }
     };
     var handleDone = function () {
-        setIsOpen(false);
-        onDone === null || onDone === void 0 ? void 0 : onDone(multipleRooms ? rooms : internalData);
+        // Only close if all ages are filled (when there are minors)
+        if (!hasMinorsWithoutAges() || areAllAgesFilled()) {
+            setIsOpen(false);
+            onDone === null || onDone === void 0 ? void 0 : onDone(multipleRooms ? rooms : internalData);
+        }
     };
     var handleAddRoom = function () {
         var newRoom = __assign(__assign({}, DEFAULT_PAX_DATA), { roomId: "".concat(rooms.length + 1) });
@@ -372,7 +440,7 @@ var PaxSelector = function (_a) {
         return "".concat(total, " pax");
     };
     var hasPax = getTotalPax() > 0;
-    return (_jsxs("div", { className: "pax-selector ".concat(disabled ? 'pax-selector--disabled' : '', " ").concat(className), ref: containerRef, children: [_jsxs("button", { ref: triggerRef, type: "button", className: "pax-selector__trigger", onClick: function () { return !disabled && setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "true", disabled: disabled, children: [_jsx(Text, { size: "sm", variant: "regular", className: "pax-selector__label", children: label }), _jsxs("div", { className: "pax-selector__input ".concat(isOpen ? 'pax-selector__input--active' : '', " ").concat(disabled ? 'pax-selector__input--disabled' : ''), children: [_jsxs("div", { className: "pax-selector__input-content", children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__input-icon" }), _jsx("span", { className: "pax-selector__input-text ".concat(!hasPax ? 'pax-selector__input-placeholder' : ''), children: getDisplayText() })] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "pax-selector__chevron ".concat(isOpen ? 'pax-selector__chevron--open' : '') })] })] }), isOpen && (_jsxs("div", { className: "pax-selector__dropdown", children: [multipleRooms ? (_jsxs(_Fragment, { children: [showAddRoom && (_jsxs("button", { type: "button", className: "pax-selector__add-room", onClick: handleAddRoom, children: [_jsx(Icon, { name: "home", size: "sm", className: "pax-selector__add-room-icon" }), "Add a room", _jsx(Icon, { name: "plus", size: "sm", className: "pax-selector__add-room-icon" })] })), _jsx("div", { className: "pax-selector__rooms", children: rooms.map(function (room, index) { return (_jsx(RoomEditor, { room: room, roomNumber: index + 1, showRemove: rooms.length > 1, maxAdults: maxAdults, maxTeens: maxTeens, maxChildren: maxChildren, maxInfants: maxInfants, onChange: function (updatedRoom) { return handleRoomChange(room.roomId, updatedRoom); }, onRemove: function () { return handleRemoveRoom(room.roomId); }, scrollToRef: index === rooms.length - 1 ? lastRoomRef : undefined, ageRange: ageRange }, room.roomId)); }) })] })) : (
+    return (_jsxs("div", { className: "pax-selector ".concat(disabled ? 'pax-selector--disabled' : '', " ").concat(className), ref: containerRef, children: [_jsxs("button", { ref: triggerRef, type: "button", className: "pax-selector__trigger", onClick: function () { return !disabled && setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "true", disabled: disabled, children: [_jsx(Text, { size: "sm", variant: "regular", className: "pax-selector__label", children: label }), _jsxs("div", { className: "pax-selector__input ".concat(isOpen ? 'pax-selector__input--active' : '', " ").concat(disabled ? 'pax-selector__input--disabled' : ''), children: [_jsxs("div", { className: "pax-selector__input-content", children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__input-icon" }), _jsx("span", { className: "pax-selector__input-text ".concat(!hasPax ? 'pax-selector__input-placeholder' : ''), children: getDisplayText() })] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "pax-selector__chevron ".concat(isOpen ? 'pax-selector__chevron--open' : '') })] })] }), isOpen && (_jsxs("div", { className: "pax-selector__dropdown", children: [multipleRooms ? (_jsxs(_Fragment, { children: [showAddRoom && (_jsxs("button", { type: "button", className: "pax-selector__add-room", onClick: handleAddRoom, children: [_jsx(Icon, { name: "home", size: "sm", className: "pax-selector__add-room-icon" }), "Add a room", _jsx(Icon, { name: "plus", size: "sm", className: "pax-selector__add-room-icon" })] })), _jsx("div", { className: "pax-selector__rooms", children: rooms.map(function (room, index) { return (_jsx(RoomEditor, { room: room, roomNumber: index + 1, showRemove: rooms.length > 1, maxAdults: maxAdults, maxTeens: maxTeens, maxChildren: maxChildren, maxInfants: maxInfants, onChange: function (updatedRoom) { return handleRoomChange(room.roomId, updatedRoom); }, onRemove: function () { return handleRemoveRoom(room.roomId); }, scrollToRef: index === rooms.length - 1 ? lastRoomRef : undefined, ageRange: ageRange, checkEmpty: checkEmpty }, room.roomId)); }) })] })) : (
                     /* Single Room Mode */
                     _jsxs(_Fragment, { children: [_jsxs("div", { className: "pax-selector__steppers", children: [_jsx(StepperRow, { label: "Adult", value: internalData.adults, max: maxAdults, onChange: function (val) { return handleDataChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: internalData.teens, max: maxTeens, onChange: function (val) { return handleDataChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: internalData.children, max: maxChildren, onChange: function (val) { return handleDataChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: internalData.infants, max: maxInfants, onChange: function (val) { return handleDataChange('infants', val); } })] }), (internalData.teens > 0 ||
                                 internalData.children > 0 ||
@@ -397,19 +465,19 @@ var PaxSelector = function (_a) {
                                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                                 return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) {
                                                                         return handleAgeChange('teenAges', actualIndex, selectedAge);
-                                                                    }, ageRange: ageRange, required: true }, "teen-".concat(actualIndex)));
+                                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "teen-".concat(actualIndex)));
                                                             }) }, "teen-chunk-".concat(chunkIndex))); }), internalData.children > 0 &&
                                                         childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
                                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                                 return (_jsx(AgeSelector, { label: "Child", value: age, onChange: function (selectedAge) {
                                                                         return handleAgeChange('childAges', actualIndex, selectedAge);
-                                                                    }, ageRange: ageRange, required: true }, "child-".concat(actualIndex)));
+                                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "child-".concat(actualIndex)));
                                                             }) }, "child-chunk-".concat(chunkIndex))); }), internalData.infants > 0 &&
                                                         infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
                                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                                 return (_jsx(AgeSelector, { label: "Infant", value: age, onChange: function (selectedAge) {
                                                                         return handleAgeChange('infantAges', actualIndex, selectedAge);
-                                                                    }, ageRange: ageRange, required: true }, "infant-".concat(actualIndex)));
+                                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "infant-".concat(actualIndex)));
                                                             }) }, "infant-chunk-".concat(chunkIndex))); })] }));
                                         })() })] })), _jsx(ClientTypeSelector, { value: internalData.clientType, onChange: function (val) { return handleDataChange('clientType', val); } })] })), _jsxs("div", { className: "pax-selector__actions", children: [_jsx("button", { type: "button", className: "pax-selector__clear-btn", onClick: handleClear, children: "Clear Pax" }), _jsx("button", { type: "button", className: "pax-selector__done-btn", onClick: handleDone, children: "Done" })] })] }))] }));
 };

package/dist/components/organisms/RoundTrip/RoundTrip.js

@@ -184,6 +184,6 @@ var RoundTrip = function (_a) {
     var isAccommodationEmpty = checkEmpty && !internalAccommodation;
     var pickupDropoffOptions = getPickupDropoffOptions();
     var accommodationOptions = getAccommodationOptions();
-    return (_jsx("div", { className: "round-trip ".concat(className), "data-round-trip-id": id, children: _jsxs("div", { className: "round-trip__content", children: [_jsx("div", { className: "round-trip__field round-trip__field--pax ".concat(isPaxEmpty ? 'round-trip__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', scrollOnOpen: scrollOnOpen }) }), _jsxs("div", { className: "round-trip__field round-trip__field--dates", children: [_jsx(Text, { size: "sm", variant: "regular", className: "round-trip__field-label", children: "Arrival date - Departure date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY - DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 2, iconBGFull: false, showChevron: true, onValueChange: handleDateRangeChange, selectionMode: "range", defaultValue: internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined, inputClassName: "round-trip__date-picker--input", state: isDateEmpty ? 'error' : undefined, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "round-trip__field round-trip__field--pickup-dropoff", children: _jsx(LocationDropdown, { label: "Pick up / Drop-off point", options: pickupDropoffOptions.options, groups: pickupDropoffOptions.groups, selectedValue: (internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) || null, onSelectionChange: handlePickupDropoffChange, placeholder: "Select pick-up / drop-off point", direction: undefined, type: "airport-port", showGroupTitles: true, error: isPickupDropoffEmpty, scrollOnOpen: scrollOnOpen }) }), _jsx("div", { className: "round-trip__field round-trip__field--accommodation", children: _jsx(LocationDropdown, { label: "Accommodation", options: accommodationOptions.options, groups: accommodationOptions.groups, selectedValue: (internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) || null, onSelectionChange: handleAccommodationChange, placeholder: "Select accommodation", direction: "dropoff", type: "accommodation", showGroupTitles: false, error: isAccommodationEmpty, scrollOnOpen: scrollOnOpen }) })] }) }));
+    return (_jsx("div", { className: "round-trip ".concat(className), "data-round-trip-id": id, children: _jsxs("div", { className: "round-trip__content", children: [_jsx("div", { className: "round-trip__field round-trip__field--pax ".concat(isPaxEmpty ? 'round-trip__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty }) }), _jsxs("div", { className: "round-trip__field round-trip__field--dates", children: [_jsx(Text, { size: "sm", variant: "regular", className: "round-trip__field-label", children: "Arrival date - Departure date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY - DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 2, iconBGFull: false, showChevron: true, onValueChange: handleDateRangeChange, selectionMode: "range", defaultValue: internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined, inputClassName: "round-trip__date-picker--input", state: isDateEmpty ? 'error' : undefined, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "round-trip__field round-trip__field--pickup-dropoff", children: _jsx(LocationDropdown, { label: "Pick up / Drop-off point", options: pickupDropoffOptions.options, groups: pickupDropoffOptions.groups, selectedValue: (internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) || null, onSelectionChange: handlePickupDropoffChange, placeholder: "Select pick-up / drop-off point", direction: undefined, type: "airport-port", showGroupTitles: true, error: isPickupDropoffEmpty, scrollOnOpen: scrollOnOpen }) }), _jsx("div", { className: "round-trip__field round-trip__field--accommodation", children: _jsx(LocationDropdown, { label: "Accommodation", options: accommodationOptions.options, groups: accommodationOptions.groups, selectedValue: (internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) || null, onSelectionChange: handleAccommodationChange, placeholder: "Select accommodation", direction: "dropoff", type: "accommodation", showGroupTitles: false, error: isAccommodationEmpty, scrollOnOpen: scrollOnOpen }) })] }) }));
 };
 export default RoundTrip;

package/dist/components/organisms/SearchBarTransfer/SearchBarTransfer.js

@@ -120,6 +120,40 @@ var SearchBarTransfer = function (_a) {
         }
         setTransferLines(function (prevLines) { return prevLines.filter(function (line) { return line.id !== id; }); });
     };
+    // Helper function to check if all ages are filled for pax data
+    var areAllAgesFilled = function (paxData) {
+        // Check teen ages
+        if (paxData.teens > 0) {
+            var teenAges = paxData.teenAges || [];
+            if (teenAges.length < paxData.teens)
+                return false;
+            for (var i = 0; i < paxData.teens; i++) {
+                if (teenAges[i] === undefined || teenAges[i] === null)
+                    return false;
+            }
+        }
+        // Check child ages
+        if (paxData.children > 0) {
+            var childAges = paxData.childAges || [];
+            if (childAges.length < paxData.children)
+                return false;
+            for (var i = 0; i < paxData.children; i++) {
+                if (childAges[i] === undefined || childAges[i] === null)
+                    return false;
+            }
+        }
+        // Check infant ages
+        if (paxData.infants > 0) {
+            var infantAges = paxData.infantAges || [];
+            if (infantAges.length < paxData.infants)
+                return false;
+            for (var i = 0; i < paxData.infants; i++) {
+                if (infantAges[i] === undefined || infantAges[i] === null)
+                    return false;
+            }
+        }
+        return true;
+    };
     // Validate data
     var validateData = function () {
         if (mode === "roundtrip") {
@@ -136,6 +170,11 @@ var SearchBarTransfer = function (_a) {
                 setError("Please fill in all the transfer details.");
                 return false;
             }
+            // Check if all ages are filled
+            if (!areAllAgesFilled(roundTripData.paxData)) {
+                setError("Please fill in all the transfer details.");
+                return false;
+            }
         }
         else {
             if (transferLines.length === 0) {
@@ -152,6 +191,11 @@ var SearchBarTransfer = function (_a) {
                     setError("Please fill in all the transfer details.");
                     return false;
                 }
+                // Check if all ages are filled for this line
+                if (!areAllAgesFilled(line.paxData)) {
+                    setError("Please fill in all the transfer details.");
+                    return false;
+                }
             }
         }
         setError(null);

package/dist/components/organisms/TransferLine/TransferLine.js

@@ -192,7 +192,7 @@ var TransferLine = function (_a) {
     var isDateEmpty = checkEmpty && (!internalTransferDate || internalTransferDate === '');
     var isPickupEmpty = checkEmpty && !internalPickupPoint;
     var isDropoffEmpty = checkEmpty && !internalDropoffPoint;
-    return (_jsxs("div", { className: "transfer-line transfer-line--".concat(type, " ").concat(disabled ? 'transfer-line--disabled' : '', " ").concat(className), "data-transfer-id": id, children: [showTitle && (_jsxs("div", { className: "transfer-line__header", children: [_jsx(Icon, { name: getTypeIcon(), size: "sm", className: "transfer-line__header-icon" }), _jsx(Text, { size: "sm", variant: "medium", className: "transfer-line__header-label", children: getTypeLabel() })] })), _jsxs("div", { className: "transfer-line__content-container", children: [_jsxs("div", { className: "transfer-line__content", children: [_jsx("div", { className: "transfer-line__field transfer-line__field--pax ".concat(isPaxEmpty ? 'transfer-line__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', disabled: disabled, scrollOnOpen: scrollOnOpen }) }), _jsxs("div", { className: "transfer-line__field transfer-line__field--date", children: [_jsx(Text, { size: "sm", variant: "regular", className: "transfer-line__field-label", children: "Transfer date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 1, iconBGFull: false, showChevron: true, onValueChange: handleDateChange, selectionMode: "single", defaultValue: internalTransferDate, inputClassName: "transfer-line__date-picker", state: isDateEmpty ? 'error' : undefined, disabled: disabled, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "transfer-line__field transfer-line__field--pickup", children: _jsx(LocationDropdown, { label: "Pick-up point", options: filterLocations('pickup').options, groups: filterLocations('pickup').groups, selectedValue: (internalPickupPoint === null || internalPickupPoint === void 0 ? void 0 : internalPickupPoint.id) || null, onSelectionChange: handlePickupChange, placeholder: "Select a pick-up point", direction: "pickup", type: type === 'inter-hotel'
+    return (_jsxs("div", { className: "transfer-line transfer-line--".concat(type, " ").concat(disabled ? 'transfer-line--disabled' : '', " ").concat(className), "data-transfer-id": id, children: [showTitle && (_jsxs("div", { className: "transfer-line__header", children: [_jsx(Icon, { name: getTypeIcon(), size: "sm", className: "transfer-line__header-icon" }), _jsx(Text, { size: "sm", variant: "medium", className: "transfer-line__header-label", children: getTypeLabel() })] })), _jsxs("div", { className: "transfer-line__content-container", children: [_jsxs("div", { className: "transfer-line__content", children: [_jsx("div", { className: "transfer-line__field transfer-line__field--pax ".concat(isPaxEmpty ? 'transfer-line__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', disabled: disabled, scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty }) }), _jsxs("div", { className: "transfer-line__field transfer-line__field--date", children: [_jsx(Text, { size: "sm", variant: "regular", className: "transfer-line__field-label", children: "Transfer date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 1, iconBGFull: false, showChevron: true, onValueChange: handleDateChange, selectionMode: "single", defaultValue: internalTransferDate, inputClassName: "transfer-line__date-picker", state: isDateEmpty ? 'error' : undefined, disabled: disabled, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "transfer-line__field transfer-line__field--pickup", children: _jsx(LocationDropdown, { label: "Pick-up point", options: filterLocations('pickup').options, groups: filterLocations('pickup').groups, selectedValue: (internalPickupPoint === null || internalPickupPoint === void 0 ? void 0 : internalPickupPoint.id) || null, onSelectionChange: handlePickupChange, placeholder: "Select a pick-up point", direction: "pickup", type: type === 'inter-hotel'
                                         ? 'accommodation'
                                         : type === 'arrival'
                                             ? 'airport-port'

package/dist/styles/components/molecule/age-selector.css

@@ -64,6 +64,27 @@
   border-color: var(--dropdown-color-border-hover,#0f7173);
 }
 
+.age-selector__input--error {
+  border-color: var(--color-red-600,#dc2626);
+  background-color: var(--color-coral-red-50,#fff8f8);
+}
+
+.age-selector__input--error:hover {
+  border-color: var(--color-red-600,#dc2626);
+}
+
+.age-selector__input--error .age-selector__input-field {
+  color: var(--color-coral-red-600,#f83b3b);
+}
+
+.age-selector__input--error .age-selector__input-field::placeholder {
+  color: var(--color-coral-red-600,#f83b3b);
+}
+
+.age-selector__input--error .age-selector__icon {
+  color: var(--color-coral-red-600,#f83b3b);
+}
+
 .age-selector__input--default .age-selector__input-field::placeholder {
   color: var(--dropdown-selector-color-filled-foreground-default,#737373);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.64",
+  "version": "0.2.66",
   "private": false,
   "description": "Bibliothèque de composants Mautourco pour le redesign",
   "main": "dist/index.js",

package/src/components/molecules/AgeSelector/AgeSelector.tsx

@@ -18,6 +18,8 @@ export interface AgeSelectorProps {
   className?: string;
   /** Placeholder text */
   placeholder?: string;
+  /** Whether to show error state */
+  error?: boolean;
 }
 
 const AgeSelector: React.FC<AgeSelectorProps> = ({
@@ -28,6 +30,7 @@ const AgeSelector: React.FC<AgeSelectorProps> = ({
   required = false,
   className = '',
   placeholder = '--',
+  error = false,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState<string>(
@@ -118,7 +121,7 @@ const AgeSelector: React.FC<AgeSelectorProps> = ({
       </Text>
       <div className="age-selector__container">
         <div
-          className={`age-selector__input ${isOpen ? 'age-selector__input--open' : ''} ${value !== undefined ? 'age-selector__input--selected' : 'age-selector__input--default'}`}>
+          className={`age-selector__input ${isOpen ? 'age-selector__input--open' : ''} ${value !== undefined ? 'age-selector__input--selected' : 'age-selector__input--default'} ${error && value === undefined ? 'age-selector__input--error' : ''}`}>
           <input
             ref={inputRef}
             type="text"

package/src/components/molecules/TooltipDisplay/TooltipDisplay.tsx

@@ -21,7 +21,7 @@ export function TooltipDisplay(props: TooltipDisplayProps) {
   const { children, content, side = 'right', maxWidth = '300px' } = props;
   return (
     <Tooltip>
-      <TooltipTrigger className="text-[var(--color-icon-branded)]" asChild>
+      <TooltipTrigger className="text-[var(--color-icon-branded)]">
         {children}
       </TooltipTrigger>
       <TooltipContent className={`max-w-[${maxWidth}]`} side={side} style={{ maxWidth }}>

package/src/components/organisms/PaxSelector/PaxSelector.tsx

@@ -72,6 +72,8 @@ export interface PaxSelectorProps {
   scrollOnOpen?: boolean;
   /** Age range for child categories */
   ageRange?: number[];
+  /** Whether to check if age inputs are empty and show error state */
+  checkEmpty?: boolean;
 }
 
 const DEFAULT_PAX_DATA: PaxData = {
@@ -246,6 +248,7 @@ interface RoomEditorProps {
   onRemove: () => void;
   scrollToRef?: React.RefObject<HTMLDivElement | null>;
   ageRange: number[];
+  checkEmpty?: boolean;
 }
 
 const RoomEditor: React.FC<RoomEditorProps> = ({
@@ -260,6 +263,7 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
   onRemove,
   scrollToRef,
   ageRange,
+  checkEmpty = false,
 }) => {
   const roomAgesSectionRef = useRef<HTMLDivElement>(null);
   const previousRoomCounts = useRef({ teens: 0, children: 0, infants: 0 });
@@ -444,6 +448,7 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
                           }
                           ageRange={ageRange}
                           required
+                          error={checkEmpty}
                         />
                       );
                     })}
@@ -466,6 +471,7 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
                           }
                           ageRange={ageRange}
                           required
+                          error={checkEmpty}
                         />
                       );
                     })}
@@ -488,6 +494,7 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
                           }
                           ageRange={ageRange}
                           required
+                          error={checkEmpty}
                         />
                       );
                     })}
@@ -527,6 +534,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
   ageRange = CHILD_CATEGORY_AGES,
   scrollOnOpen = false,
   disabled = false,
+  checkEmpty = false,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [internalData, setInternalData] = useState<PaxData>(
@@ -617,11 +625,70 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [internalData.teens, internalData.children, internalData.infants, multipleRooms]);
 
+  // Helper function to check if all ages are filled
+  const areAllAgesFilled = (): boolean => {
+    if (multipleRooms) {
+      // Check all rooms
+      for (const room of rooms) {
+        if (room.teens > 0) {
+          const teenAges = room.teenAges || [];
+          for (let i = 0; i < room.teens; i++) {
+            if (teenAges[i] === undefined || teenAges[i] === null) return false;
+          }
+        }
+        if (room.children > 0) {
+          const childAges = room.childAges || [];
+          for (let i = 0; i < room.children; i++) {
+            if (childAges[i] === undefined || childAges[i] === null) return false;
+          }
+        }
+        if (room.infants > 0) {
+          const infantAges = room.infantAges || [];
+          for (let i = 0; i < room.infants; i++) {
+            if (infantAges[i] === undefined || infantAges[i] === null) return false;
+          }
+        }
+      }
+    } else {
+      // Check single room mode
+      if (internalData.teens > 0) {
+        const teenAges = internalData.teenAges || [];
+        for (let i = 0; i < internalData.teens; i++) {
+          if (teenAges[i] === undefined || teenAges[i] === null) return false;
+        }
+      }
+      if (internalData.children > 0) {
+        const childAges = internalData.childAges || [];
+        for (let i = 0; i < internalData.children; i++) {
+          if (childAges[i] === undefined || childAges[i] === null) return false;
+        }
+      }
+      if (internalData.infants > 0) {
+        const infantAges = internalData.infantAges || [];
+        for (let i = 0; i < internalData.infants; i++) {
+          if (infantAges[i] === undefined || infantAges[i] === null) return false;
+        }
+      }
+    }
+    return true;
+  };
+
+  // Check if there are any minors that need age specification
+  const hasMinorsWithoutAges = (): boolean => {
+    if (multipleRooms) {
+      return rooms.some(room => room.teens > 0 || room.children > 0 || room.infants > 0);
+    }
+    return internalData.teens > 0 || internalData.children > 0 || internalData.infants > 0;
+  };
+
   // Handle clicks outside the dropdown
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
+        // Only close if all ages are filled (when there are minors)
+        if (!hasMinorsWithoutAges() || areAllAgesFilled()) {
+          setIsOpen(false);
+        }
       }
     };
 
@@ -632,7 +699,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [isOpen]);
+  }, [isOpen, internalData, rooms, multipleRooms]);
 
   // Scroll to input when dropdown opens (if scrollOnOpen is true)
   useEffect(() => {
@@ -704,8 +771,11 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
   };
 
   const handleDone = () => {
-    setIsOpen(false);
-    onDone?.(multipleRooms ? rooms : internalData);
+    // Only close if all ages are filled (when there are minors)
+    if (!hasMinorsWithoutAges() || areAllAgesFilled()) {
+      setIsOpen(false);
+      onDone?.(multipleRooms ? rooms : internalData);
+    }
   };
 
   const handleAddRoom = () => {
@@ -829,6 +899,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
                     onRemove={() => handleRemoveRoom(room.roomId)}
                     scrollToRef={index === rooms.length - 1 ? lastRoomRef : undefined}
                     ageRange={ageRange}
+                    checkEmpty={checkEmpty}
                   />
                 ))}
               </div>
@@ -935,6 +1006,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
                                       }
                                       ageRange={ageRange}
                                       required
+                                      error={checkEmpty}
                                     />
                                   );
                                 })}
@@ -961,6 +1033,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
                                       }
                                       ageRange={ageRange}
                                       required
+                                      error={checkEmpty}
                                     />
                                   );
                                 })}
@@ -987,6 +1060,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
                                       }
                                       ageRange={ageRange}
                                       required
+                                      error={checkEmpty}
                                     />
                                   );
                                 })}

package/src/components/organisms/RoundTrip/RoundTrip.tsx

@@ -303,6 +303,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
             placeholder="2 pax"
             className={isPaxEmpty ? 'pax-selector--error' : ''}
             scrollOnOpen={scrollOnOpen}
+            checkEmpty={checkEmpty}
           />
         </div>
 

package/src/components/organisms/SearchBarTransfer/SearchBarTransfer.tsx

@@ -194,6 +194,42 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     setTransferLines((prevLines) => prevLines.filter((line) => line.id !== id));
   };
 
+  // Helper function to check if all ages are filled for pax data
+  const areAllAgesFilled = (paxData: { 
+    teens: number; 
+    children: number; 
+    infants: number; 
+    teenAges?: number[]; 
+    childAges?: number[]; 
+    infantAges?: number[] 
+  }): boolean => {
+    // Check teen ages
+    if (paxData.teens > 0) {
+      const teenAges = paxData.teenAges || [];
+      if (teenAges.length < paxData.teens) return false;
+      for (let i = 0; i < paxData.teens; i++) {
+        if (teenAges[i] === undefined || teenAges[i] === null) return false;
+      }
+    }
+    // Check child ages
+    if (paxData.children > 0) {
+      const childAges = paxData.childAges || [];
+      if (childAges.length < paxData.children) return false;
+      for (let i = 0; i < paxData.children; i++) {
+        if (childAges[i] === undefined || childAges[i] === null) return false;
+      }
+    }
+    // Check infant ages
+    if (paxData.infants > 0) {
+      const infantAges = paxData.infantAges || [];
+      if (infantAges.length < paxData.infants) return false;
+      for (let i = 0; i < paxData.infants; i++) {
+        if (infantAges[i] === undefined || infantAges[i] === null) return false;
+      }
+    }
+    return true;
+  };
+
   // Validate data
   const validateData = (): boolean => {
     if (mode === "roundtrip") {
@@ -212,6 +248,11 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
         setError("Please fill in all the transfer details.");
         return false;
       }
+      // Check if all ages are filled
+      if (!areAllAgesFilled(roundTripData.paxData)) {
+        setError("Please fill in all the transfer details.");
+        return false;
+      }
     } else {
       if (transferLines.length === 0) {
         setError("Please add at least one transfer.");
@@ -228,6 +269,11 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
           setError("Please fill in all the transfer details.");
           return false;
         }
+        // Check if all ages are filled for this line
+        if (!areAllAgesFilled(line.paxData)) {
+          setError("Please fill in all the transfer details.");
+          return false;
+        }
       }
     }
     setError(null);

package/src/components/organisms/TransferLine/TransferLine.tsx

@@ -320,6 +320,7 @@ const TransferLine: React.FC<TransferLineProps> = ({
               className={isPaxEmpty ? 'pax-selector--error' : ''}
               disabled={disabled}
               scrollOnOpen={scrollOnOpen}
+              checkEmpty={checkEmpty}
             />
           </div>
 

package/src/styles/components/molecule/age-selector.css

@@ -35,6 +35,26 @@
   @apply border-[var(--dropdown-color-border-hover,#0f7173)];
 }
 
+.age-selector__input--error {
+  @apply border-[var(--color-red-600,#dc2626)] bg-[var(--color-coral-red-50,#fff8f8)];
+}
+
+.age-selector__input--error:hover {
+  @apply border-[var(--color-red-600,#dc2626)];
+}
+
+.age-selector__input--error .age-selector__input-field {
+  @apply text-[var(--color-coral-red-600,#f83b3b)];
+}
+
+.age-selector__input--error .age-selector__input-field::placeholder {
+  @apply text-[var(--color-coral-red-600,#f83b3b)];
+}
+
+.age-selector__input--error .age-selector__icon {
+  @apply text-[var(--color-coral-red-600,#f83b3b)];
+}
+
 .age-selector__input--default .age-selector__input-field::placeholder {
   @apply text-[var(--dropdown-selector-color-filled-foreground-default,#737373)];
 }