mautourco-components 0.1.2 → 0.2.0

package/dist/components/organisms/Dialog/Dialog.js

@@ -0,0 +1,162 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useMobile } from '../../../hooks/useMobile';
+import Button from '../../atoms/Button/Button';
+import Icon from '../../atoms/Icon/Icon';
+import '../../../styles/components/organism/dialog.css';
+/**
+ * Dialog component - A modal dialog that adapts to different screen sizes
+ *
+ * @example
+ * ```tsx
+ * <Dialog
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Edit Information"
+ *   onPrimaryClick={handleSave}
+ * >
+ *   <p>Your content here</p>
+ * </Dialog>
+ * ```
+ */
+export var Dialog = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title, children = _a.children, footer = _a.footer, _b = _a.size, size = _b === void 0 ? 'responsive' : _b, _c = _a.primaryButtonText, primaryButtonText = _c === void 0 ? 'Save and update' : _c, _d = _a.secondaryButtonText, secondaryButtonText = _d === void 0 ? 'Cancel' : _d, onPrimaryClick = _a.onPrimaryClick, onSecondaryClick = _a.onSecondaryClick, _e = _a.showFooter, showFooter = _e === void 0 ? true : _e, _f = _a.showCloseButton, showCloseButton = _f === void 0 ? true : _f, _g = _a.closeOnOverlayClick, closeOnOverlayClick = _g === void 0 ? true : _g, _h = _a.closeOnEscape, closeOnEscape = _h === void 0 ? true : _h, _j = _a.className, className = _j === void 0 ? '' : _j, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
+    var _k = useMobile(), isMobile = _k.isMobile, isTablet = _k.isTablet, isDesktop = _k.isDesktop;
+    var dialogRef = useRef(null);
+    var previousFocusRef = useRef(null);
+    // Determine the actual size based on responsive setting
+    var getActualSize = function () {
+        if (size !== 'responsive')
+            return size;
+        if (isMobile)
+            return 'mobile';
+        if (isTablet)
+            return 'tablet';
+        return 'desktop';
+    };
+    var actualSize = getActualSize();
+    var isMobileSize = actualSize === 'mobile';
+    var isTabletSize = actualSize === 'tablet';
+    // Handle escape key
+    var handleKeyDown = useCallback(function (event) {
+        if (closeOnEscape && event.key === 'Escape') {
+            onClose();
+        }
+    }, [closeOnEscape, onClose]);
+    // Handle overlay click
+    var handleOverlayClick = useCallback(function (event) {
+        if (closeOnOverlayClick && event.target === event.currentTarget) {
+            onClose();
+        }
+    }, [closeOnOverlayClick, onClose]);
+    // Focus management and scroll lock
+    useEffect(function () {
+        if (isOpen) {
+            // Store current focus
+            previousFocusRef.current = document.activeElement;
+            // Focus the dialog
+            if (dialogRef.current) {
+                dialogRef.current.focus();
+            }
+            // Lock body scroll
+            document.body.style.overflow = 'hidden';
+            // Add escape listener
+            document.addEventListener('keydown', handleKeyDown);
+        }
+        else {
+            // Unlock body scroll
+            document.body.style.overflow = '';
+            // Restore focus
+            if (previousFocusRef.current) {
+                previousFocusRef.current.focus();
+            }
+        }
+        return function () {
+            document.body.style.overflow = '';
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, handleKeyDown]);
+    // Handle secondary button click
+    var handleSecondaryClick = function () {
+        if (onSecondaryClick) {
+            onSecondaryClick();
+        }
+        else {
+            onClose();
+        }
+    };
+    // Handle primary button click
+    var handlePrimaryClick = function () {
+        if (onPrimaryClick) {
+            onPrimaryClick();
+        }
+    };
+    // Generate unique IDs for accessibility
+    var titleId = ariaLabelledBy || "dialog-title-".concat(title.replace(/\s+/g, '-').toLowerCase());
+    var bodyId = ariaDescribedBy || "dialog-body-".concat(title.replace(/\s+/g, '-').toLowerCase());
+    // Build class names
+    var contentClasses = [
+        'dialog__content',
+        "dialog__content--".concat(actualSize),
+        size === 'responsive' ? 'dialog__content--responsive' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var headerClasses = [
+        'dialog__header',
+        isMobileSize ? 'dialog__header--mobile' : '',
+        size === 'responsive' ? 'dialog__header--responsive' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var titleClasses = [
+        'dialog__title',
+        isMobileSize ? 'dialog__title--mobile' : '',
+        isTabletSize ? 'dialog__title--tablet' : '',
+        size === 'responsive' ? 'dialog__title--responsive' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var closeButtonClasses = 'dialog__close-button';
+    var bodyClasses = [
+        'dialog__body',
+        isMobileSize ? 'dialog__body--mobile' : '',
+        size === 'responsive' ? 'dialog__body--responsive' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var footerClasses = [
+        'dialog__footer',
+        isMobileSize ? 'dialog__footer--mobile' : '',
+        size === 'responsive' ? 'dialog__footer--responsive' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var footerButtonsClasses = [
+        'dialog__footer-buttons',
+        isMobileSize ? 'dialog__footer-buttons--mobile' : '',
+        size === 'responsive' ? 'dialog__footer-buttons--responsive' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    if (!isOpen) {
+        return null;
+    }
+    var dialogContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: "dialog-overlay", onClick: handleOverlayClick, "aria-hidden": "true" }), _jsx("div", __assign({ className: "dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": bodyId, ref: dialogRef, tabIndex: -1, onClick: handleOverlayClick }, { children: _jsxs("div", __assign({ className: contentClasses }, { children: [_jsxs("div", __assign({ className: headerClasses }, { children: [_jsx("h2", __assign({ id: titleId, className: titleClasses }, { children: title })), showCloseButton && (_jsx("button", __assign({ type: "button", className: closeButtonClasses, onClick: onClose, "aria-label": "Close dialog" }, { children: _jsx(Icon, { name: "close", size: "md" }) })))] })), _jsx("div", __assign({ id: bodyId, className: bodyClasses }, { children: _jsx("div", __assign({ className: "dialog__body-content" }, { children: children })) })), showFooter && (_jsx("div", __assign({ className: footerClasses }, { children: footer ? (footer) : (_jsxs("div", __assign({ className: footerButtonsClasses }, { children: [_jsx(Button, __assign({ variant: "outline-secondary", size: isMobileSize ? 'sm' : 'md', onClick: handleSecondaryClick }, { children: secondaryButtonText })), _jsx(Button, __assign({ variant: "secondary", size: isMobileSize ? 'sm' : 'md', onClick: handlePrimaryClick }, { children: primaryButtonText }))] }))) })))] })) }))] }));
+    // Use portal to render at the document body level
+    return createPortal(dialogContent, document.body);
+};
+export default Dialog;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+export type ClientType = 'Standard client' | 'VIP' | 'VVIP' | 'Honeymooners';
+/**
+ * Individual passenger/pax data for a single room
+ */
+export interface PaxData {
+    adults: number;
+    teens: number;
+    children: number;
+    infants: number;
+    /** Ages for teens (1-18 years) */
+    teenAges?: number[];
+    /** Ages for children (1-18 years) */
+    childAges?: number[];
+    /** Ages for infants (1-18 years) */
+    infantAges?: number[];
+    clientType: ClientType;
+}
+/**
+ * Room data for multiple room mode
+ */
+export interface RoomData extends PaxData {
+    roomId: string;
+}
+export interface PaxSelectorProps {
+    /** Label for the selector */
+    label?: string;
+    /** Current pax data (single room mode) */
+    value?: PaxData;
+    /** Callback when pax data changes (single room mode) */
+    onChange?: (data: PaxData) => void;
+    /** Callback when "Add a room" is clicked */
+    onAddRoom?: () => void;
+    /** Callback when Done button is clicked */
+    onDone?: (data: PaxData | RoomData[]) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Maximum number of adults */
+    maxAdults?: number;
+    /** Maximum number of teens */
+    maxTeens?: number;
+    /** Maximum number of children */
+    maxChildren?: number;
+    /** Maximum number of infants */
+    maxInfants?: number;
+    /** Show add room link */
+    showAddRoom?: boolean;
+    /** Enable multiple room mode */
+    multipleRooms?: boolean;
+    /** Default rooms for multiple room mode */
+    defaultRooms?: RoomData[];
+    /** Callback when rooms change in multiple room mode */
+    onRoomsChange?: (rooms: RoomData[]) => void;
+    /** Callback when a room is removed */
+    onRemoveRoom?: (roomId: string) => void;
+    /** Default pax data for single room mode (will trigger onChange on mount) */
+    defaultPaxData?: PaxData;
+}
+export declare const DEFAULT_PAX_DATA_WITH_ADULTS: PaxData;
+declare const PaxSelector: React.FC<PaxSelectorProps>;
+export default PaxSelector;

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

@@ -0,0 +1,402 @@
+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);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+var DEFAULT_PAX_DATA = {
+    adults: 0,
+    teens: 0,
+    children: 0,
+    infants: 0,
+    teenAges: [],
+    childAges: [],
+    infantAges: [],
+    clientType: 'Standard client',
+};
+export var DEFAULT_PAX_DATA_WITH_ADULTS = {
+    adults: 2,
+    teens: 0,
+    children: 0,
+    infants: 0,
+    teenAges: [],
+    childAges: [],
+    infantAges: [],
+    clientType: 'Standard client',
+};
+var CLIENT_TYPES = ['Standard client', 'VIP', 'VVIP', 'Honeymooners'];
+// Age range for all child categories (teens, children, infants)
+var CHILD_CATEGORY_AGES = Array.from({ length: 18 }, function (_, i) { return i + 1; }); // 1-18 years
+var AgeSelector = function (_a) {
+    var label = _a.label, value = _a.value, onChange = _a.onChange, ageRange = _a.ageRange, required = _a.required;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = useState(value !== undefined ? value.toString() : ''), inputValue = _c[0], setInputValue = _c[1];
+    var containerRef = useRef(null);
+    var inputRef = useRef(null);
+    // Sync input value when prop value changes
+    useEffect(function () {
+        setInputValue(value !== undefined ? value.toString() : '');
+    }, [value]);
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    var handleInputChange = function (e) {
+        var newValue = e.target.value;
+        // Only allow numeric input or empty string
+        if (newValue === '' || /^\d+$/.test(newValue)) {
+            setInputValue(newValue);
+            // Only update if it's a valid number within range
+            var numValue = parseInt(newValue, 10);
+            if (newValue === '') {
+                // Allow empty input - don't update onChange
+                return;
+            }
+            else if (!isNaN(numValue) && ageRange.includes(numValue)) {
+                onChange(numValue);
+            }
+        }
+    };
+    var handleInputBlur = function () {
+        // Validate and set to valid value or clear if invalid
+        var numValue = parseInt(inputValue, 10);
+        if (inputValue === '') {
+            // Keep empty if user cleared it
+            return;
+        }
+        else if (isNaN(numValue) || !ageRange.includes(numValue)) {
+            // Reset to current value if invalid
+            setInputValue(value !== undefined ? value.toString() : '');
+        }
+        else {
+            // Ensure the input value matches the validated value
+            setInputValue(numValue.toString());
+        }
+    };
+    var handleInputKeyDown = function (e) {
+        var _a;
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+    };
+    var handleSelect = function (age) {
+        var numAge = parseInt(age, 10);
+        onChange(numAge);
+        setIsOpen(false);
+        setInputValue(age);
+    };
+    var handleDropdownToggle = function () {
+        setIsOpen(!isOpen);
+    };
+    var ageOptions = ageRange.map(function (age) { return age.toString(); });
+    var displayValue = inputValue || undefined;
+    return (_jsxs("div", __assign({ className: "pax-selector__age-selector", ref: containerRef }, { children: [_jsxs(Text, __assign({ size: "sm", variant: "regular", className: "pax-selector__age-label" }, { children: [label, required && _jsx("span", __assign({ className: "pax-selector__age-required" }, { children: " *" }))] })), _jsxs("div", __assign({ className: "dropdown-container pax-selector__age-dropdown-container" }, { children: [_jsxs("div", __assign({ className: "dropdown-input ".concat(isOpen ? 'dropdown-input--open pax-selector__age-dropdown-input--open' : '', " ").concat(value !== undefined ? 'dropdown-input--selected' : 'dropdown-input--default', " pax-selector__age-dropdown-input") }, { children: [_jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", className: "dropdown-input__text pax-selector__age-input-text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, onFocus: function () { return setIsOpen(false); }, placeholder: "--", "aria-label": "".concat(label, " age"), style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    outline: 'none',
+                                    width: '100%',
+                                    cursor: 'text'
+                                } }), _jsx("button", __assign({ type: "button", className: "pax-selector__age-dropdown-btn", onClick: function (e) {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleDropdownToggle();
+                                }, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-label": "Open age dropdown", style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                    padding: 0,
+                                    display: 'flex',
+                                    alignItems: 'center'
+                                } }, { children: _jsx(Icon, { name: "chevron-down", size: "sm", className: "dropdown-input__icon dropdown-input__icon--chevron" }) }))] })), isOpen && (_jsx("div", __assign({ className: "dropdown-menu", role: "listbox" }, { children: ageOptions.map(function (age) { return (_jsx("div", __assign({ className: "dropdown-option ".concat((value === null || value === void 0 ? void 0 : value.toString()) === age ? 'dropdown-option--selected' : ''), onClick: function () { return handleSelect(age); }, role: "option", "aria-selected": (value === null || value === void 0 ? void 0 : value.toString()) === age }, { children: age }), age)); }) })))] }))] })));
+};
+var StepperRow = function (_a) {
+    var label = _a.label, value = _a.value, _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 99 : _c, onChange = _a.onChange;
+    var handleDecrement = function () {
+        if (value > min) {
+            onChange(value - 1);
+        }
+    };
+    var handleIncrement = function () {
+        if (value < max) {
+            onChange(value + 1);
+        }
+    };
+    return (_jsxs("div", __assign({ className: "pax-selector__stepper" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", className: "pax-selector__stepper-label" }, { children: label })), _jsxs("div", __assign({ className: "pax-selector__stepper-controls" }, { children: [_jsx("button", __assign({ type: "button", className: "pax-selector__stepper-btn", onClick: handleDecrement, disabled: value <= min, "aria-label": "Decrease ".concat(label) }, { children: _jsx(Icon, { name: "minus", size: "sm" }) })), _jsx("span", __assign({ className: "pax-selector__stepper-count" }, { children: value })), _jsx("button", __assign({ type: "button", className: "pax-selector__stepper-btn", onClick: handleIncrement, disabled: value >= max, "aria-label": "Increase ".concat(label) }, { children: _jsx(Icon, { name: "plus", size: "sm" }) }))] }))] })));
+};
+var ClientTypeSelector = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var containerRef = useRef(null);
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    var handleSelect = function (type) {
+        onChange(type);
+        setIsOpen(false);
+    };
+    return (_jsxs("div", __assign({ className: "pax-selector__client-type" }, { children: [_jsx(Text, __assign({ size: "sm", variant: "regular", className: "pax-selector__client-type-label" }, { children: "Client type" })), _jsxs("div", __assign({ className: "pax-selector__client-type-select", ref: containerRef }, { children: [_jsxs("button", __assign({ type: "button", className: "pax-selector__client-type-trigger", onClick: function () { return setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "listbox" }, { children: [_jsxs("div", __assign({ className: "pax-selector__client-type-content" }, { children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__client-type-icon" }), _jsx("span", __assign({ 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", __assign({ className: "pax-selector__client-type-dropdown", role: "listbox" }, { children: CLIENT_TYPES.map(function (type) { return (_jsxs("button", __assign({ 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;
+    var handleFieldChange = function (field, value) {
+        var _a;
+        onChange(__assign(__assign({}, room), (_a = {}, _a[field] = value, _a)));
+    };
+    var handleAgeChange = function (category, index, age) {
+        var ages = __spreadArray([], (room[category] || []), true);
+        ages[index] = age;
+        handleFieldChange(category, ages);
+    };
+    // Generate age arrays based on counts
+    useEffect(function () {
+        var teenAges = room.teenAges || [];
+        var childAges = room.childAges || [];
+        var infantAges = room.infantAges || [];
+        // Adjust teen ages array
+        if (teenAges.length < room.teens) {
+            handleFieldChange('teenAges', __spreadArray(__spreadArray([], teenAges, true), Array(room.teens - teenAges.length).fill(undefined), true));
+        }
+        else if (teenAges.length > room.teens) {
+            handleFieldChange('teenAges', teenAges.slice(0, room.teens));
+        }
+        // Adjust child ages array
+        if (childAges.length < room.children) {
+            handleFieldChange('childAges', __spreadArray(__spreadArray([], childAges, true), Array(room.children - childAges.length).fill(undefined), true));
+        }
+        else if (childAges.length > room.children) {
+            handleFieldChange('childAges', childAges.slice(0, room.children));
+        }
+        // Adjust infant ages array
+        if (infantAges.length < room.infants) {
+            handleFieldChange('infantAges', __spreadArray(__spreadArray([], infantAges, true), Array(room.infants - infantAges.length).fill(undefined), true));
+        }
+        else if (infantAges.length > room.infants) {
+            handleFieldChange('infantAges', infantAges.slice(0, room.infants));
+        }
+    }, [room.teens, room.children, room.infants]);
+    // Chunk ages into groups of 2 for layout
+    var chunkAges = function (ages, category) {
+        var chunks = [];
+        for (var i = 0; i < ages.length; i += 2) {
+            chunks.push(ages.slice(i, i + 2));
+        }
+        return chunks;
+    };
+    var teenAgeChunks = chunkAges(room.teenAges || [], 'Teen');
+    var childAgeChunks = chunkAges(room.childAges || [], 'Child');
+    var infantAgeChunks = chunkAges(room.infantAges || [], 'Infant');
+    return (_jsxs("div", __assign({ className: "pax-selector__room-container" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-header" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-title" }, { children: [_jsxs(Text, __assign({ size: "lg", variant: "bold", className: "pax-selector__room-name" }, { children: ["Room ", roomNumber] })), _jsx(Icon, { name: "home", size: "md", className: "pax-selector__room-icon" })] })), showRemove && (_jsxs("button", __assign({ type: "button", className: "pax-selector__room-remove", onClick: onRemove, "aria-label": "Remove room ".concat(roomNumber) }, { children: [_jsx(Icon, { name: "close", size: "sm", className: "pax-selector__room-remove-icon" }), _jsx("span", __assign({ className: "pax-selector__room-remove-text" }, { children: "Remove" }))] })))] })), _jsxs("div", __assign({ className: "pax-selector__room-content" }, { children: [_jsxs("div", __assign({ className: "pax-selector__steppers" }, { children: [_jsx(StepperRow, { label: "Adult", value: room.adults, max: maxAdults, onChange: function (val) { return handleFieldChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: room.teens, max: maxTeens, onChange: function (val) { return handleFieldChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: room.children, max: maxChildren, onChange: function (val) { return handleFieldChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: room.infants, max: maxInfants, onChange: function (val) { return handleFieldChange('infants', val); } })] })), ((room.teens > 0) || (room.children > 0) || (room.infants > 0)) && (_jsxs("div", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsxs("div", __assign({ className: "pax-selector__age-groups" }, { children: [room.teens > 0 && teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
+                                            var actualIndex = chunkIndex * 2 + ageIndex;
+                                            return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) { return handleAgeChange('teenAges', actualIndex, selectedAge); }, ageRange: CHILD_CATEGORY_AGES, required: true }, "teen-".concat(actualIndex)));
+                                        }) }), "teen-chunk-".concat(chunkIndex))); }), room.children > 0 && childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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: CHILD_CATEGORY_AGES, required: true }, "child-".concat(actualIndex)));
+                                        }) }), "child-chunk-".concat(chunkIndex))); }), room.infants > 0 && infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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: CHILD_CATEGORY_AGES, required: true }, "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;
+    var _m = useState(false), isOpen = _m[0], setIsOpen = _m[1];
+    var _o = useState(value || defaultPaxData || DEFAULT_PAX_DATA), internalData = _o[0], setInternalData = _o[1];
+    var _p = useState(defaultRooms || [__assign(__assign({}, DEFAULT_PAX_DATA), { roomId: '1' })]), rooms = _p[0], setRooms = _p[1];
+    var containerRef = useRef(null);
+    var hasInitialized = useRef(false);
+    // Sync internal data with external value prop
+    useEffect(function () {
+        if (value && !multipleRooms) {
+            setInternalData(value);
+        }
+    }, [value, multipleRooms]);
+    // Initialize with default pax data and trigger onChange on mount
+    useEffect(function () {
+        if (!hasInitialized.current && !value && defaultPaxData && !multipleRooms && onChange) {
+            hasInitialized.current = true;
+            onChange(defaultPaxData);
+        }
+    }, [defaultPaxData, value, multipleRooms, onChange]);
+    // Manage age arrays in single mode when counts change
+    useEffect(function () {
+        if (!multipleRooms) {
+            var teenAges = internalData.teenAges || [];
+            var childAges = internalData.childAges || [];
+            var infantAges = internalData.infantAges || [];
+            var needsUpdate = false;
+            var updatedData = __assign({}, internalData);
+            // Adjust teen ages array
+            if (teenAges.length < internalData.teens) {
+                updatedData.teenAges = __spreadArray(__spreadArray([], teenAges, true), Array(internalData.teens - teenAges.length).fill(undefined), true);
+                needsUpdate = true;
+            }
+            else if (teenAges.length > internalData.teens) {
+                updatedData.teenAges = teenAges.slice(0, internalData.teens);
+                needsUpdate = true;
+            }
+            // Adjust child ages array
+            if (childAges.length < internalData.children) {
+                updatedData.childAges = __spreadArray(__spreadArray([], childAges, true), Array(internalData.children - childAges.length).fill(undefined), true);
+                needsUpdate = true;
+            }
+            else if (childAges.length > internalData.children) {
+                updatedData.childAges = childAges.slice(0, internalData.children);
+                needsUpdate = true;
+            }
+            // Adjust infant ages array
+            if (infantAges.length < internalData.infants) {
+                updatedData.infantAges = __spreadArray(__spreadArray([], infantAges, true), Array(internalData.infants - infantAges.length).fill(undefined), true);
+                needsUpdate = true;
+            }
+            else if (infantAges.length > internalData.infants) {
+                updatedData.infantAges = infantAges.slice(0, internalData.infants);
+                needsUpdate = true;
+            }
+            if (needsUpdate) {
+                setInternalData(updatedData);
+                onChange === null || onChange === void 0 ? void 0 : onChange(updatedData);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [internalData.teens, internalData.children, internalData.infants, multipleRooms]);
+    // Handle clicks outside the dropdown
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    var handleDataChange = function (field, newValue) {
+        var _a;
+        var newData = __assign(__assign({}, internalData), (_a = {}, _a[field] = newValue, _a));
+        setInternalData(newData);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newData);
+    };
+    var handleClear = function () {
+        if (multipleRooms) {
+            var clearedRooms = rooms.map(function (room) { return (__assign(__assign({}, DEFAULT_PAX_DATA), { roomId: room.roomId })); });
+            setRooms(clearedRooms);
+            onRoomsChange === null || onRoomsChange === void 0 ? void 0 : onRoomsChange(clearedRooms);
+        }
+        else {
+            var clearedData = __assign({}, DEFAULT_PAX_DATA);
+            setInternalData(clearedData);
+            onChange === null || onChange === void 0 ? void 0 : onChange(clearedData);
+        }
+    };
+    var handleDone = function () {
+        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) });
+        var updatedRooms = __spreadArray(__spreadArray([], rooms, true), [newRoom], false);
+        setRooms(updatedRooms);
+        onRoomsChange === null || onRoomsChange === void 0 ? void 0 : onRoomsChange(updatedRooms);
+        onAddRoom === null || onAddRoom === void 0 ? void 0 : onAddRoom();
+    };
+    var handleRemoveRoom = function (roomId) {
+        var updatedRooms = rooms.filter(function (room) { return room.roomId !== roomId; });
+        setRooms(updatedRooms);
+        onRoomsChange === null || onRoomsChange === void 0 ? void 0 : onRoomsChange(updatedRooms);
+        onRemoveRoom === null || onRemoveRoom === void 0 ? void 0 : onRemoveRoom(roomId);
+    };
+    var handleRoomChange = function (roomId, updatedRoom) {
+        var updatedRooms = rooms.map(function (room) {
+            return room.roomId === roomId ? updatedRoom : room;
+        });
+        setRooms(updatedRooms);
+        onRoomsChange === null || onRoomsChange === void 0 ? void 0 : onRoomsChange(updatedRooms);
+    };
+    var getTotalPax = function () {
+        if (multipleRooms) {
+            return rooms.reduce(function (total, room) {
+                return total + room.adults + room.teens + room.children + room.infants;
+            }, 0);
+        }
+        var adults = internalData.adults, teens = internalData.teens, children = internalData.children, infants = internalData.infants;
+        return adults + teens + children + infants;
+    };
+    var getDisplayText = function () {
+        var total = getTotalPax();
+        if (total === 0) {
+            return placeholder;
+        }
+        return "".concat(total, " pax");
+    };
+    var hasPax = getTotalPax() > 0;
+    return (_jsxs("div", __assign({ className: "pax-selector ".concat(className), ref: containerRef }, { children: [_jsxs("button", __assign({ type: "button", className: "pax-selector__trigger", onClick: function () { return setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "true" }, { children: [_jsx(Text, __assign({ size: "sm", variant: "regular", className: "pax-selector__label" }, { children: label })), _jsxs("div", __assign({ className: "pax-selector__input ".concat(isOpen ? 'pax-selector__input--active' : '') }, { children: [_jsxs("div", __assign({ className: "pax-selector__input-content" }, { children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__input-icon" }), _jsx("span", __assign({ 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", __assign({ className: "pax-selector__dropdown" }, { children: [multipleRooms ? (_jsxs(_Fragment, { children: [showAddRoom && (_jsxs("button", __assign({ 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", __assign({ 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); } }, room.roomId)); }) }))] })) : (
+                    /* Single Room Mode */
+                    _jsxs(_Fragment, { children: [_jsxs("div", __assign({ 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) || (internalData.infants > 0)) && (_jsxs("div", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsx("div", __assign({ className: "pax-selector__age-groups" }, { children: (function () {
+                                            var chunkAges = function (ages, category) {
+                                                var chunks = [];
+                                                for (var i = 0; i < ages.length; i += 2) {
+                                                    chunks.push(ages.slice(i, i + 2));
+                                                }
+                                                return chunks;
+                                            };
+                                            var teenAgeChunks = chunkAges(internalData.teenAges || [], 'Teen');
+                                            var childAgeChunks = chunkAges(internalData.childAges || [], 'Child');
+                                            var infantAgeChunks = chunkAges(internalData.infantAges || [], 'Infant');
+                                            var handleAgeChange = function (category, index, age) {
+                                                var ages = __spreadArray([], (internalData[category] || []), true);
+                                                ages[index] = age;
+                                                handleDataChange(category, ages);
+                                            };
+                                            return (_jsxs(_Fragment, { children: [internalData.teens > 0 && teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
+                                                            var actualIndex = chunkIndex * 2 + ageIndex;
+                                                            return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) { return handleAgeChange('teenAges', actualIndex, selectedAge); }, ageRange: CHILD_CATEGORY_AGES, required: true }, "teen-".concat(actualIndex)));
+                                                        }) }), "teen-chunk-".concat(chunkIndex))); }), internalData.children > 0 && childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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: CHILD_CATEGORY_AGES, required: true }, "child-".concat(actualIndex)));
+                                                        }) }), "child-chunk-".concat(chunkIndex))); }), internalData.infants > 0 && infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { 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: CHILD_CATEGORY_AGES, required: true }, "infant-".concat(actualIndex)));
+                                                        }) }), "infant-chunk-".concat(chunkIndex))); })] }));
+                                        })() }))] }))), _jsx(ClientTypeSelector, { value: internalData.clientType, onChange: function (val) { return handleDataChange('clientType', val); } })] })), _jsxs("div", __assign({ className: "pax-selector__actions" }, { children: [_jsx("button", __assign({ type: "button", className: "pax-selector__clear-btn", onClick: handleClear }, { children: "Clear Pax" })), _jsx("button", __assign({ type: "button", className: "pax-selector__done-btn", onClick: handleDone }, { children: "Done" }))] }))] })))] })));
+};
+export default PaxSelector;