mautourco-components 0.2.4 → 0.2.7

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

@@ -1,979 +1,979 @@
-import React, { useState, useRef, useEffect } from 'react';
-import Icon from '../../atoms/Icon/Icon';
-import { Text } from '../../atoms/Typography/Typography';
-
-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;
-}
-
-const DEFAULT_PAX_DATA: PaxData = {
-  adults: 0,
-  teens: 0,
-  children: 0,
-  infants: 0,
-  teenAges: [],
-  childAges: [],
-  infantAges: [],
-  clientType: 'Standard client',
-};
-
-export const DEFAULT_PAX_DATA_WITH_ADULTS: PaxData = {
-  adults: 2,
-  teens: 0,
-  children: 0,
-  infants: 0,
-  teenAges: [],
-  childAges: [],
-  infantAges: [],
-  clientType: 'Standard client',
-};
-
-const CLIENT_TYPES: ClientType[] = ['Standard client', 'VIP', 'VVIP', 'Honeymooners'];
-
-// Age range for all child categories (teens, children, infants)
-const CHILD_CATEGORY_AGES = Array.from({ length: 18 }, (_, i) => i + 1); // 1-18 years
-
-interface AgeSelectorProps {
-  label: string;
-  value: number | undefined;
-  onChange: (age: number) => void;
-  ageRange: number[];
-  required?: boolean;
-}
-
-const AgeSelector: React.FC<AgeSelectorProps> = ({ label, value, onChange, ageRange, required }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [inputValue, setInputValue] = useState<string>(value !== undefined ? value.toString() : '');
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Sync input value when prop value changes
-  useEffect(() => {
-    setInputValue(value !== undefined ? value.toString() : '');
-  }, [value]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen]);
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const 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
-      const numValue = parseInt(newValue, 10);
-      if (newValue === '') {
-        // Allow empty input - don't update onChange
-        return;
-      } else if (!isNaN(numValue) && ageRange.includes(numValue)) {
-        onChange(numValue);
-      }
-    }
-  };
-
-  const handleInputBlur = () => {
-    // Validate and set to valid value or clear if invalid
-    const 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());
-    }
-  };
-
-  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      inputRef.current?.blur();
-    }
-  };
-
-  const handleSelect = (age: string) => {
-    const numAge = parseInt(age, 10);
-    onChange(numAge);
-    setIsOpen(false);
-    setInputValue(age);
-  };
-
-  const handleDropdownToggle = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const ageOptions = ageRange.map(age => age.toString());
-  const displayValue = inputValue || undefined;
-
-  return (
-    <div className="pax-selector__age-selector" ref={containerRef}>
-      <Text size="sm" variant="regular" className="pax-selector__age-label">
-        {label}
-        {required && <span className="pax-selector__age-required"> *</span>}
-      </Text>
-        <div className="dropdown-container pax-selector__age-dropdown-container">
-        <div className={`dropdown-input ${isOpen ? 'dropdown-input--open pax-selector__age-dropdown-input--open' : ''} ${value !== undefined ? 'dropdown-input--selected' : 'dropdown-input--default'} pax-selector__age-dropdown-input`}>
-          <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={() => setIsOpen(false)}
-            placeholder="--"
-            aria-label={`${label} age`}
-            style={{ 
-              background: 'transparent', 
-              border: 'none', 
-              outline: 'none',
-              width: '100%',
-              cursor: 'text'
-            }}
-          />
-          <button
-            type="button"
-            className="pax-selector__age-dropdown-btn"
-            onClick={(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'
-            }}
-          >
-            <Icon 
-              name="chevron-down" 
-              size="sm" 
-              className="dropdown-input__icon dropdown-input__icon--chevron" 
-            />
-          </button>
-        </div>
-        {isOpen && (
-          <div className="dropdown-menu" role="listbox">
-            {ageOptions.map((age) => (
-              <div
-                key={age}
-                className={`dropdown-option ${value?.toString() === age ? 'dropdown-option--selected' : ''}`}
-                onClick={() => handleSelect(age)}
-                role="option"
-                aria-selected={value?.toString() === age}
-              >
-                {age}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-interface StepperRowProps {
-  label: string;
-  value: number;
-  min?: number;
-  max?: number;
-  onChange: (value: number) => void;
-}
-
-const StepperRow: React.FC<StepperRowProps> = ({ 
-  label, 
-  value, 
-  min = 0, 
-  max = 99, 
-  onChange 
-}) => {
-  const handleDecrement = () => {
-    if (value > min) {
-      onChange(value - 1);
-    }
-  };
-
-  const handleIncrement = () => {
-    if (value < max) {
-      onChange(value + 1);
-    }
-  };
-
-  return (
-    <div className="pax-selector__stepper">
-      <Text size="base" variant="bold" className="pax-selector__stepper-label">
-        {label}
-      </Text>
-      <div className="pax-selector__stepper-controls">
-        <button
-          type="button"
-          className="pax-selector__stepper-btn"
-          onClick={handleDecrement}
-          disabled={value <= min}
-          aria-label={`Decrease ${label}`}
-        >
-          <Icon name="minus" size="sm" />
-        </button>
-        <span className="pax-selector__stepper-count">{value}</span>
-        <button
-          type="button"
-          className="pax-selector__stepper-btn"
-          onClick={handleIncrement}
-          disabled={value >= max}
-          aria-label={`Increase ${label}`}
-        >
-          <Icon name="plus" size="sm" />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-interface ClientTypeSelectorProps {
-  value: ClientType;
-  onChange: (value: ClientType) => void;
-}
-
-const ClientTypeSelector: React.FC<ClientTypeSelectorProps> = ({ value, onChange }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen]);
-
-  const handleSelect = (type: ClientType) => {
-    onChange(type);
-    setIsOpen(false);
-  };
-
-  return (
-    <div className="pax-selector__client-type">
-      <Text size="sm" variant="regular" className="pax-selector__client-type-label">
-        Client type
-      </Text>
-      <div className="pax-selector__client-type-select" ref={containerRef}>
-        <button
-          type="button"
-          className="pax-selector__client-type-trigger"
-          onClick={() => setIsOpen(!isOpen)}
-          aria-expanded={isOpen}
-          aria-haspopup="listbox"
-        >
-          <div className="pax-selector__client-type-content">
-            <Icon name="user-icon" size="sm" className="pax-selector__client-type-icon" />
-            <span className="pax-selector__client-type-text">{value}</span>
-          </div>
-          <Icon 
-            name="chevron-down" 
-            size="sm" 
-            className={`pax-selector__client-type-chevron ${isOpen ? 'pax-selector__client-type-chevron--open' : ''}`} 
-          />
-        </button>
-        
-        {isOpen && (
-          <div className="pax-selector__client-type-dropdown" role="listbox">
-            {CLIENT_TYPES.map((type) => (
-              <button
-                key={type}
-                type="button"
-                className={`pax-selector__client-type-option ${value === type ? 'pax-selector__client-type-option--selected' : ''}`}
-                onClick={() => handleSelect(type)}
-                role="option"
-                aria-selected={value === type}
-              >
-                <Icon name="user-icon" size="sm" />
-                {type}
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-interface RoomEditorProps {
-  room: RoomData;
-  roomNumber: number;
-  showRemove: boolean;
-  maxAdults: number;
-  maxTeens: number;
-  maxChildren: number;
-  maxInfants: number;
-  onChange: (room: RoomData) => void;
-  onRemove: () => void;
-}
-
-const RoomEditor: React.FC<RoomEditorProps> = ({
-  room,
-  roomNumber,
-  showRemove,
-  maxAdults,
-  maxTeens,
-  maxChildren,
-  maxInfants,
-  onChange,
-  onRemove,
-}) => {
-  const handleFieldChange = (field: keyof PaxData, value: number | ClientType | number[]) => {
-    onChange({ ...room, [field]: value });
-  };
-
-  const handleAgeChange = (category: 'teenAges' | 'childAges' | 'infantAges', index: number, age: number) => {
-    const ages = [...(room[category] || [])];
-    ages[index] = age;
-    handleFieldChange(category, ages);
-  };
-
-  // Generate age arrays based on counts
-  useEffect(() => {
-    const teenAges = room.teenAges || [];
-    const childAges = room.childAges || [];
-    const infantAges = room.infantAges || [];
-
-    // Adjust teen ages array
-    if (teenAges.length < room.teens) {
-      handleFieldChange('teenAges', [...teenAges, ...Array(room.teens - teenAges.length).fill(undefined)]);
-    } else if (teenAges.length > room.teens) {
-      handleFieldChange('teenAges', teenAges.slice(0, room.teens));
-    }
-
-    // Adjust child ages array
-    if (childAges.length < room.children) {
-      handleFieldChange('childAges', [...childAges, ...Array(room.children - childAges.length).fill(undefined)]);
-    } else if (childAges.length > room.children) {
-      handleFieldChange('childAges', childAges.slice(0, room.children));
-    }
-
-    // Adjust infant ages array
-    if (infantAges.length < room.infants) {
-      handleFieldChange('infantAges', [...infantAges, ...Array(room.infants - infantAges.length).fill(undefined)]);
-    } 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
-  const chunkAges = (ages: (number | undefined)[], category: string) => {
-    const chunks: (number | undefined)[][] = [];
-    for (let i = 0; i < ages.length; i += 2) {
-      chunks.push(ages.slice(i, i + 2));
-    }
-    return chunks;
-  };
-
-  const teenAgeChunks = chunkAges(room.teenAges || [], 'Teen');
-  const childAgeChunks = chunkAges(room.childAges || [], 'Child');
-  const infantAgeChunks = chunkAges(room.infantAges || [], 'Infant');
-
-  return (
-    <div className="pax-selector__room-container">
-      <div className="pax-selector__room-header">
-        <div className="pax-selector__room-title">
-          <Text size="lg" variant="bold" className="pax-selector__room-name">
-            Room {roomNumber}
-          </Text>
-          <Icon name="home" size="md" className="pax-selector__room-icon" />
-        </div>
-        {showRemove && (
-          <button
-            type="button"
-            className="pax-selector__room-remove"
-            onClick={onRemove}
-            aria-label={`Remove room ${roomNumber}`}
-          >
-            <Icon name="close" size="sm" className="pax-selector__room-remove-icon" />
-            <span className="pax-selector__room-remove-text">Remove</span>
-          </button>
-        )}
-      </div>
-
-      <div className="pax-selector__room-content">
-        <div className="pax-selector__steppers">
-          <StepperRow
-            label="Adult"
-            value={room.adults}
-            max={maxAdults}
-            onChange={(val) => handleFieldChange('adults', val)}
-          />
-          <StepperRow
-            label="Teen"
-            value={room.teens}
-            max={maxTeens}
-            onChange={(val) => handleFieldChange('teens', val)}
-          />
-          <StepperRow
-            label="Child"
-            value={room.children}
-            max={maxChildren}
-            onChange={(val) => handleFieldChange('children', val)}
-          />
-          <StepperRow
-            label="Infant"
-            value={room.infants}
-            max={maxInfants}
-            onChange={(val) => handleFieldChange('infants', val)}
-          />
-        </div>
-
-        {/* Age specification section */}
-        {((room.teens > 0) || (room.children > 0) || (room.infants > 0)) && (
-          <div className="pax-selector__age-section">
-            <Text size="base" variant="bold" className="pax-selector__age-section-title">
-              Please specify the age :
-            </Text>
-            
-            <div className="pax-selector__age-groups">
-              {/* Teen ages */}
-              {room.teens > 0 && teenAgeChunks.map((chunk, chunkIndex) => (
-                <div key={`teen-chunk-${chunkIndex}`} className="pax-selector__age-row">
-                  {chunk.map((age, ageIndex) => {
-                    const actualIndex = chunkIndex * 2 + ageIndex;
-                    return (
-                      <AgeSelector
-                        key={`teen-${actualIndex}`}
-                        label="Teen"
-                        value={age}
-                        onChange={(selectedAge) => handleAgeChange('teenAges', actualIndex, selectedAge)}
-                        ageRange={CHILD_CATEGORY_AGES}
-                        required
-                      />
-                    );
-                  })}
-                </div>
-              ))}
-
-              {/* Child ages */}
-              {room.children > 0 && childAgeChunks.map((chunk, chunkIndex) => (
-                <div key={`child-chunk-${chunkIndex}`} className="pax-selector__age-row">
-                  {chunk.map((age, ageIndex) => {
-                    const actualIndex = chunkIndex * 2 + ageIndex;
-                    return (
-                      <AgeSelector
-                        key={`child-${actualIndex}`}
-                        label="Child"
-                        value={age}
-                        onChange={(selectedAge) => handleAgeChange('childAges', actualIndex, selectedAge)}
-                        ageRange={CHILD_CATEGORY_AGES}
-                        required
-                      />
-                    );
-                  })}
-                </div>
-              ))}
-
-              {/* Infant ages */}
-              {room.infants > 0 && infantAgeChunks.map((chunk, chunkIndex) => (
-                <div key={`infant-chunk-${chunkIndex}`} className="pax-selector__age-row">
-                  {chunk.map((age, ageIndex) => {
-                    const actualIndex = chunkIndex * 2 + ageIndex;
-                    return (
-                      <AgeSelector
-                        key={`infant-${actualIndex}`}
-                        label="Infant"
-                        value={age}
-                        onChange={(selectedAge) => handleAgeChange('infantAges', actualIndex, selectedAge)}
-                        ageRange={CHILD_CATEGORY_AGES}
-                        required
-                      />
-                    );
-                  })}
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        <ClientTypeSelector
-          value={room.clientType}
-          onChange={(val) => handleFieldChange('clientType', val)}
-        />
-      </div>
-    </div>
-  );
-};
-
-const PaxSelector: React.FC<PaxSelectorProps> = ({
-  label = 'Number of pax',
-  value,
-  onChange,
-  onAddRoom,
-  onDone,
-  placeholder = 'Select pax',
-  className = '',
-  maxAdults = 10,
-  maxTeens = 10,
-  maxChildren = 10,
-  maxInfants = 10,
-  showAddRoom = true,
-  multipleRooms = false,
-  defaultRooms,
-  onRoomsChange,
-  onRemoveRoom,
-  defaultPaxData = DEFAULT_PAX_DATA_WITH_ADULTS,
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [internalData, setInternalData] = useState<PaxData>(value || defaultPaxData || DEFAULT_PAX_DATA);
-  const [rooms, setRooms] = useState<RoomData[]>(
-    defaultRooms || [{ ...DEFAULT_PAX_DATA, roomId: '1' }]
-  );
-  const containerRef = useRef<HTMLDivElement>(null);
-  const hasInitialized = useRef(false);
-
-  // Sync internal data with external value prop
-  useEffect(() => {
-    if (value && !multipleRooms) {
-      setInternalData(value);
-    }
-  }, [value, multipleRooms]);
-
-  // Initialize with default pax data and trigger onChange on mount
-  useEffect(() => {
-    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(() => {
-    if (!multipleRooms) {
-      const teenAges = internalData.teenAges || [];
-      const childAges = internalData.childAges || [];
-      const infantAges = internalData.infantAges || [];
-
-      let needsUpdate = false;
-      const updatedData = { ...internalData };
-
-      // Adjust teen ages array
-      if (teenAges.length < internalData.teens) {
-        updatedData.teenAges = [...teenAges, ...Array(internalData.teens - teenAges.length).fill(undefined)];
-        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 = [...childAges, ...Array(internalData.children - childAges.length).fill(undefined)];
-        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 = [...infantAges, ...Array(internalData.infants - infantAges.length).fill(undefined)];
-        needsUpdate = true;
-      } else if (infantAges.length > internalData.infants) {
-        updatedData.infantAges = infantAges.slice(0, internalData.infants);
-        needsUpdate = true;
-      }
-
-      if (needsUpdate) {
-        setInternalData(updatedData);
-        onChange?.(updatedData);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [internalData.teens, internalData.children, internalData.infants, multipleRooms]);
-
-  // Handle clicks outside the dropdown
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen]);
-
-  const handleDataChange = (field: keyof PaxData, newValue: number | ClientType | number[]) => {
-    const newData = { ...internalData, [field]: newValue };
-    setInternalData(newData);
-    onChange?.(newData);
-  };
-
-  const handleClear = () => {
-    if (multipleRooms) {
-      const clearedRooms = rooms.map(room => ({ ...DEFAULT_PAX_DATA, roomId: room.roomId }));
-      setRooms(clearedRooms);
-      onRoomsChange?.(clearedRooms);
-    } else {
-      const clearedData = { ...DEFAULT_PAX_DATA };
-      setInternalData(clearedData);
-      onChange?.(clearedData);
-    }
-  };
-
-  const handleDone = () => {
-    setIsOpen(false);
-    onDone?.(multipleRooms ? rooms : internalData);
-  };
-
-  const handleAddRoom = () => {
-    const newRoom: RoomData = { 
-      ...DEFAULT_PAX_DATA, 
-      roomId: `${rooms.length + 1}` 
-    };
-    const updatedRooms = [...rooms, newRoom];
-    setRooms(updatedRooms);
-    onRoomsChange?.(updatedRooms);
-    onAddRoom?.();
-  };
-
-  const handleRemoveRoom = (roomId: string) => {
-    const updatedRooms = rooms.filter(room => room.roomId !== roomId);
-    setRooms(updatedRooms);
-    onRoomsChange?.(updatedRooms);
-    onRemoveRoom?.(roomId);
-  };
-
-  const handleRoomChange = (roomId: string, updatedRoom: RoomData) => {
-    const updatedRooms = rooms.map(room => 
-      room.roomId === roomId ? updatedRoom : room
-    );
-    setRooms(updatedRooms);
-    onRoomsChange?.(updatedRooms);
-  };
-
-  const getTotalPax = () => {
-    if (multipleRooms) {
-      return rooms.reduce((total, room) => 
-        total + room.adults + room.teens + room.children + room.infants, 0
-      );
-    }
-    const { adults, teens, children, infants } = internalData;
-    return adults + teens + children + infants;
-  };
-
-  const getDisplayText = () => {
-    const total = getTotalPax();
-    if (total === 0) {
-      return placeholder;
-    }
-    return `${total} pax`;
-  };
-
-  const hasPax = getTotalPax() > 0;
-
-  return (
-    <div className={`pax-selector ${className}`} ref={containerRef}>
-      <button
-        type="button"
-        className="pax-selector__trigger"
-        onClick={() => setIsOpen(!isOpen)}
-        aria-expanded={isOpen}
-        aria-haspopup="true"
-      >
-        <Text size="sm" variant="regular" className="pax-selector__label">
-          {label}
-        </Text>
-        <div className={`pax-selector__input ${isOpen ? 'pax-selector__input--active' : ''}`}>
-          <div className="pax-selector__input-content">
-            <Icon name="user-icon" size="sm" className="pax-selector__input-icon" />
-            <span className={`pax-selector__input-text ${!hasPax ? 'pax-selector__input-placeholder' : ''}`}>
-              {getDisplayText()}
-            </span>
-          </div>
-          <Icon 
-            name="chevron-down" 
-            size="sm" 
-            className={`pax-selector__chevron ${isOpen ? 'pax-selector__chevron--open' : ''}`} 
-          />
-        </div>
-      </button>
-
-      {isOpen && (
-        <div className="pax-selector__dropdown">
-          {/* Multiple Rooms Mode */}
-          {multipleRooms ? (
-            <>
-              {showAddRoom && (
-                <button
-                  type="button"
-                  className="pax-selector__add-room"
-                  onClick={handleAddRoom}
-                >
-                  <Icon name="home" size="sm" className="pax-selector__add-room-icon" />
-                  Add a room
-                  <Icon name="plus" size="sm" className="pax-selector__add-room-icon" />
-                </button>
-              )}
-
-              <div className="pax-selector__rooms">
-                {rooms.map((room, index) => (
-                  <RoomEditor
-                    key={room.roomId}
-                    room={room}
-                    roomNumber={index + 1}
-                    showRemove={rooms.length > 1}
-                    maxAdults={maxAdults}
-                    maxTeens={maxTeens}
-                    maxChildren={maxChildren}
-                    maxInfants={maxInfants}
-                    onChange={(updatedRoom) => handleRoomChange(room.roomId, updatedRoom)}
-                    onRemove={() => handleRemoveRoom(room.roomId)}
-                  />
-                ))}
-              </div>
-            </>
-          ) : (
-            /* Single Room Mode */
-            <>
-              <div className="pax-selector__steppers">
-                <StepperRow
-                  label="Adult"
-                  value={internalData.adults}
-                  max={maxAdults}
-                  onChange={(val) => handleDataChange('adults', val)}
-                />
-                <StepperRow
-                  label="Teen"
-                  value={internalData.teens}
-                  max={maxTeens}
-                  onChange={(val) => handleDataChange('teens', val)}
-                />
-                <StepperRow
-                  label="Child"
-                  value={internalData.children}
-                  max={maxChildren}
-                  onChange={(val) => handleDataChange('children', val)}
-                />
-                <StepperRow
-                  label="Infant"
-                  value={internalData.infants}
-                  max={maxInfants}
-                  onChange={(val) => handleDataChange('infants', val)}
-                />
-              </div>
-
-              {/* Age specification for single room */}
-              {((internalData.teens > 0) || (internalData.children > 0) || (internalData.infants > 0)) && (
-                <div className="pax-selector__age-section">
-                  <Text size="base" variant="bold" className="pax-selector__age-section-title">
-                    Please specify the age :
-                  </Text>
-                  
-                  <div className="pax-selector__age-groups">
-                    {/* Helper function to chunk ages into rows of 2 */}
-                    {(() => {
-                      const chunkAges = (ages: (number | undefined)[], category: string) => {
-                        const chunks: (number | undefined)[][] = [];
-                        for (let i = 0; i < ages.length; i += 2) {
-                          chunks.push(ages.slice(i, i + 2));
-                        }
-                        return chunks;
-                      };
-
-                      const teenAgeChunks = chunkAges(internalData.teenAges || [], 'Teen');
-                      const childAgeChunks = chunkAges(internalData.childAges || [], 'Child');
-                      const infantAgeChunks = chunkAges(internalData.infantAges || [], 'Infant');
-
-                      const handleAgeChange = (category: 'teenAges' | 'childAges' | 'infantAges', index: number, age: number) => {
-                        const ages = [...(internalData[category] || [])];
-                        ages[index] = age;
-                        handleDataChange(category, ages);
-                      };
-
-                      return (
-                        <>
-                          {/* Teen ages */}
-                          {internalData.teens > 0 && teenAgeChunks.map((chunk, chunkIndex) => (
-                            <div key={`teen-chunk-${chunkIndex}`} className="pax-selector__age-row">
-                              {chunk.map((age, ageIndex) => {
-                                const actualIndex = chunkIndex * 2 + ageIndex;
-                                return (
-                                  <AgeSelector
-                                    key={`teen-${actualIndex}`}
-                                    label="Teen"
-                                    value={age}
-                                    onChange={(selectedAge) => handleAgeChange('teenAges', actualIndex, selectedAge)}
-                                    ageRange={CHILD_CATEGORY_AGES}
-                                    required
-                                  />
-                                );
-                              })}
-                            </div>
-                          ))}
-
-                          {/* Child ages */}
-                          {internalData.children > 0 && childAgeChunks.map((chunk, chunkIndex) => (
-                            <div key={`child-chunk-${chunkIndex}`} className="pax-selector__age-row">
-                              {chunk.map((age, ageIndex) => {
-                                const actualIndex = chunkIndex * 2 + ageIndex;
-                                return (
-                                  <AgeSelector
-                                    key={`child-${actualIndex}`}
-                                    label="Child"
-                                    value={age}
-                                    onChange={(selectedAge) => handleAgeChange('childAges', actualIndex, selectedAge)}
-                                    ageRange={CHILD_CATEGORY_AGES}
-                                    required
-                                  />
-                                );
-                              })}
-                            </div>
-                          ))}
-
-                          {/* Infant ages */}
-                          {internalData.infants > 0 && infantAgeChunks.map((chunk, chunkIndex) => (
-                            <div key={`infant-chunk-${chunkIndex}`} className="pax-selector__age-row">
-                              {chunk.map((age, ageIndex) => {
-                                const actualIndex = chunkIndex * 2 + ageIndex;
-                                return (
-                                  <AgeSelector
-                                    key={`infant-${actualIndex}`}
-                                    label="Infant"
-                                    value={age}
-                                    onChange={(selectedAge) => handleAgeChange('infantAges', actualIndex, selectedAge)}
-                                    ageRange={CHILD_CATEGORY_AGES}
-                                    required
-                                  />
-                                );
-                              })}
-                            </div>
-                          ))}
-                        </>
-                      );
-                    })()}
-                  </div>
-                </div>
-              )}
-
-              <ClientTypeSelector
-                value={internalData.clientType}
-                onChange={(val) => handleDataChange('clientType', val)}
-              />
-            </>
-          )}
-
-          <div className="pax-selector__actions">
-            <button
-              type="button"
-              className="pax-selector__clear-btn"
-              onClick={handleClear}
-            >
-              Clear Pax
-            </button>
-            <button
-              type="button"
-              className="pax-selector__done-btn"
-              onClick={handleDone}
-            >
-              Done
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default PaxSelector;
+import React, { useState, useRef, useEffect } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+
+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;
+}
+
+const DEFAULT_PAX_DATA: PaxData = {
+  adults: 0,
+  teens: 0,
+  children: 0,
+  infants: 0,
+  teenAges: [],
+  childAges: [],
+  infantAges: [],
+  clientType: 'Standard client',
+};
+
+export const DEFAULT_PAX_DATA_WITH_ADULTS: PaxData = {
+  adults: 2,
+  teens: 0,
+  children: 0,
+  infants: 0,
+  teenAges: [],
+  childAges: [],
+  infantAges: [],
+  clientType: 'Standard client',
+};
+
+const CLIENT_TYPES: ClientType[] = ['Standard client', 'VIP', 'VVIP', 'Honeymooners'];
+
+// Age range for all child categories (teens, children, infants)
+const CHILD_CATEGORY_AGES = Array.from({ length: 18 }, (_, i) => i + 1); // 1-18 years
+
+interface AgeSelectorProps {
+  label: string;
+  value: number | undefined;
+  onChange: (age: number) => void;
+  ageRange: number[];
+  required?: boolean;
+}
+
+const AgeSelector: React.FC<AgeSelectorProps> = ({ label, value, onChange, ageRange, required }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState<string>(value !== undefined ? value.toString() : '');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync input value when prop value changes
+  useEffect(() => {
+    setInputValue(value !== undefined ? value.toString() : '');
+  }, [value]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const 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
+      const numValue = parseInt(newValue, 10);
+      if (newValue === '') {
+        // Allow empty input - don't update onChange
+        return;
+      } else if (!isNaN(numValue) && ageRange.includes(numValue)) {
+        onChange(numValue);
+      }
+    }
+  };
+
+  const handleInputBlur = () => {
+    // Validate and set to valid value or clear if invalid
+    const 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());
+    }
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      inputRef.current?.blur();
+    }
+  };
+
+  const handleSelect = (age: string) => {
+    const numAge = parseInt(age, 10);
+    onChange(numAge);
+    setIsOpen(false);
+    setInputValue(age);
+  };
+
+  const handleDropdownToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const ageOptions = ageRange.map(age => age.toString());
+  const displayValue = inputValue || undefined;
+
+  return (
+    <div className="pax-selector__age-selector" ref={containerRef}>
+      <Text size="sm" variant="regular" className="pax-selector__age-label">
+        {label}
+        {required && <span className="pax-selector__age-required"> *</span>}
+      </Text>
+        <div className="dropdown-container pax-selector__age-dropdown-container">
+        <div className={`dropdown-input ${isOpen ? 'dropdown-input--open pax-selector__age-dropdown-input--open' : ''} ${value !== undefined ? 'dropdown-input--selected' : 'dropdown-input--default'} pax-selector__age-dropdown-input`}>
+          <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={() => setIsOpen(false)}
+            placeholder="--"
+            aria-label={`${label} age`}
+            style={{ 
+              background: 'transparent', 
+              border: 'none', 
+              outline: 'none',
+              width: '100%',
+              cursor: 'text'
+            }}
+          />
+          <button
+            type="button"
+            className="pax-selector__age-dropdown-btn"
+            onClick={(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'
+            }}
+          >
+            <Icon 
+              name="chevron-down" 
+              size="sm" 
+              className="dropdown-input__icon dropdown-input__icon--chevron" 
+            />
+          </button>
+        </div>
+        {isOpen && (
+          <div className="dropdown-menu" role="listbox">
+            {ageOptions.map((age) => (
+              <div
+                key={age}
+                className={`dropdown-option ${value?.toString() === age ? 'dropdown-option--selected' : ''}`}
+                onClick={() => handleSelect(age)}
+                role="option"
+                aria-selected={value?.toString() === age}
+              >
+                {age}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface StepperRowProps {
+  label: string;
+  value: number;
+  min?: number;
+  max?: number;
+  onChange: (value: number) => void;
+}
+
+const StepperRow: React.FC<StepperRowProps> = ({ 
+  label, 
+  value, 
+  min = 0, 
+  max = 99, 
+  onChange 
+}) => {
+  const handleDecrement = () => {
+    if (value > min) {
+      onChange(value - 1);
+    }
+  };
+
+  const handleIncrement = () => {
+    if (value < max) {
+      onChange(value + 1);
+    }
+  };
+
+  return (
+    <div className="pax-selector__stepper">
+      <Text size="base" variant="bold" className="pax-selector__stepper-label">
+        {label}
+      </Text>
+      <div className="pax-selector__stepper-controls">
+        <button
+          type="button"
+          className="pax-selector__stepper-btn"
+          onClick={handleDecrement}
+          disabled={value <= min}
+          aria-label={`Decrease ${label}`}
+        >
+          <Icon name="minus" size="sm" />
+        </button>
+        <span className="pax-selector__stepper-count">{value}</span>
+        <button
+          type="button"
+          className="pax-selector__stepper-btn"
+          onClick={handleIncrement}
+          disabled={value >= max}
+          aria-label={`Increase ${label}`}
+        >
+          <Icon name="plus" size="sm" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+interface ClientTypeSelectorProps {
+  value: ClientType;
+  onChange: (value: ClientType) => void;
+}
+
+const ClientTypeSelector: React.FC<ClientTypeSelectorProps> = ({ value, onChange }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleSelect = (type: ClientType) => {
+    onChange(type);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="pax-selector__client-type">
+      <Text size="sm" variant="regular" className="pax-selector__client-type-label">
+        Client type
+      </Text>
+      <div className="pax-selector__client-type-select" ref={containerRef}>
+        <button
+          type="button"
+          className="pax-selector__client-type-trigger"
+          onClick={() => setIsOpen(!isOpen)}
+          aria-expanded={isOpen}
+          aria-haspopup="listbox"
+        >
+          <div className="pax-selector__client-type-content">
+            <Icon name="user-icon" size="sm" className="pax-selector__client-type-icon" />
+            <span className="pax-selector__client-type-text">{value}</span>
+          </div>
+          <Icon 
+            name="chevron-down" 
+            size="sm" 
+            className={`pax-selector__client-type-chevron ${isOpen ? 'pax-selector__client-type-chevron--open' : ''}`} 
+          />
+        </button>
+        
+        {isOpen && (
+          <div className="pax-selector__client-type-dropdown" role="listbox">
+            {CLIENT_TYPES.map((type) => (
+              <button
+                key={type}
+                type="button"
+                className={`pax-selector__client-type-option ${value === type ? 'pax-selector__client-type-option--selected' : ''}`}
+                onClick={() => handleSelect(type)}
+                role="option"
+                aria-selected={value === type}
+              >
+                <Icon name="user-icon" size="sm" />
+                {type}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface RoomEditorProps {
+  room: RoomData;
+  roomNumber: number;
+  showRemove: boolean;
+  maxAdults: number;
+  maxTeens: number;
+  maxChildren: number;
+  maxInfants: number;
+  onChange: (room: RoomData) => void;
+  onRemove: () => void;
+}
+
+const RoomEditor: React.FC<RoomEditorProps> = ({
+  room,
+  roomNumber,
+  showRemove,
+  maxAdults,
+  maxTeens,
+  maxChildren,
+  maxInfants,
+  onChange,
+  onRemove,
+}) => {
+  const handleFieldChange = (field: keyof PaxData, value: number | ClientType | number[]) => {
+    onChange({ ...room, [field]: value });
+  };
+
+  const handleAgeChange = (category: 'teenAges' | 'childAges' | 'infantAges', index: number, age: number) => {
+    const ages = [...(room[category] || [])];
+    ages[index] = age;
+    handleFieldChange(category, ages);
+  };
+
+  // Generate age arrays based on counts
+  useEffect(() => {
+    const teenAges = room.teenAges || [];
+    const childAges = room.childAges || [];
+    const infantAges = room.infantAges || [];
+
+    // Adjust teen ages array
+    if (teenAges.length < room.teens) {
+      handleFieldChange('teenAges', [...teenAges, ...Array(room.teens - teenAges.length).fill(undefined)]);
+    } else if (teenAges.length > room.teens) {
+      handleFieldChange('teenAges', teenAges.slice(0, room.teens));
+    }
+
+    // Adjust child ages array
+    if (childAges.length < room.children) {
+      handleFieldChange('childAges', [...childAges, ...Array(room.children - childAges.length).fill(undefined)]);
+    } else if (childAges.length > room.children) {
+      handleFieldChange('childAges', childAges.slice(0, room.children));
+    }
+
+    // Adjust infant ages array
+    if (infantAges.length < room.infants) {
+      handleFieldChange('infantAges', [...infantAges, ...Array(room.infants - infantAges.length).fill(undefined)]);
+    } 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
+  const chunkAges = (ages: (number | undefined)[], category: string) => {
+    const chunks: (number | undefined)[][] = [];
+    for (let i = 0; i < ages.length; i += 2) {
+      chunks.push(ages.slice(i, i + 2));
+    }
+    return chunks;
+  };
+
+  const teenAgeChunks = chunkAges(room.teenAges || [], 'Teen');
+  const childAgeChunks = chunkAges(room.childAges || [], 'Child');
+  const infantAgeChunks = chunkAges(room.infantAges || [], 'Infant');
+
+  return (
+    <div className="pax-selector__room-container">
+      <div className="pax-selector__room-header">
+        <div className="pax-selector__room-title">
+          <Text size="lg" variant="bold" className="pax-selector__room-name">
+            Room {roomNumber}
+          </Text>
+          <Icon name="home" size="md" className="pax-selector__room-icon" />
+        </div>
+        {showRemove && (
+          <button
+            type="button"
+            className="pax-selector__room-remove"
+            onClick={onRemove}
+            aria-label={`Remove room ${roomNumber}`}
+          >
+            <Icon name="close" size="sm" className="pax-selector__room-remove-icon" />
+            <span className="pax-selector__room-remove-text">Remove</span>
+          </button>
+        )}
+      </div>
+
+      <div className="pax-selector__room-content">
+        <div className="pax-selector__steppers">
+          <StepperRow
+            label="Adult"
+            value={room.adults}
+            max={maxAdults}
+            onChange={(val) => handleFieldChange('adults', val)}
+          />
+          <StepperRow
+            label="Teen"
+            value={room.teens}
+            max={maxTeens}
+            onChange={(val) => handleFieldChange('teens', val)}
+          />
+          <StepperRow
+            label="Child"
+            value={room.children}
+            max={maxChildren}
+            onChange={(val) => handleFieldChange('children', val)}
+          />
+          <StepperRow
+            label="Infant"
+            value={room.infants}
+            max={maxInfants}
+            onChange={(val) => handleFieldChange('infants', val)}
+          />
+        </div>
+
+        {/* Age specification section */}
+        {((room.teens > 0) || (room.children > 0) || (room.infants > 0)) && (
+          <div className="pax-selector__age-section">
+            <Text size="base" variant="bold" className="pax-selector__age-section-title">
+              Please specify the age :
+            </Text>
+            
+            <div className="pax-selector__age-groups">
+              {/* Teen ages */}
+              {room.teens > 0 && teenAgeChunks.map((chunk, chunkIndex) => (
+                <div key={`teen-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                  {chunk.map((age, ageIndex) => {
+                    const actualIndex = chunkIndex * 2 + ageIndex;
+                    return (
+                      <AgeSelector
+                        key={`teen-${actualIndex}`}
+                        label="Teen"
+                        value={age}
+                        onChange={(selectedAge) => handleAgeChange('teenAges', actualIndex, selectedAge)}
+                        ageRange={CHILD_CATEGORY_AGES}
+                        required
+                      />
+                    );
+                  })}
+                </div>
+              ))}
+
+              {/* Child ages */}
+              {room.children > 0 && childAgeChunks.map((chunk, chunkIndex) => (
+                <div key={`child-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                  {chunk.map((age, ageIndex) => {
+                    const actualIndex = chunkIndex * 2 + ageIndex;
+                    return (
+                      <AgeSelector
+                        key={`child-${actualIndex}`}
+                        label="Child"
+                        value={age}
+                        onChange={(selectedAge) => handleAgeChange('childAges', actualIndex, selectedAge)}
+                        ageRange={CHILD_CATEGORY_AGES}
+                        required
+                      />
+                    );
+                  })}
+                </div>
+              ))}
+
+              {/* Infant ages */}
+              {room.infants > 0 && infantAgeChunks.map((chunk, chunkIndex) => (
+                <div key={`infant-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                  {chunk.map((age, ageIndex) => {
+                    const actualIndex = chunkIndex * 2 + ageIndex;
+                    return (
+                      <AgeSelector
+                        key={`infant-${actualIndex}`}
+                        label="Infant"
+                        value={age}
+                        onChange={(selectedAge) => handleAgeChange('infantAges', actualIndex, selectedAge)}
+                        ageRange={CHILD_CATEGORY_AGES}
+                        required
+                      />
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <ClientTypeSelector
+          value={room.clientType}
+          onChange={(val) => handleFieldChange('clientType', val)}
+        />
+      </div>
+    </div>
+  );
+};
+
+const PaxSelector: React.FC<PaxSelectorProps> = ({
+  label = 'Number of pax',
+  value,
+  onChange,
+  onAddRoom,
+  onDone,
+  placeholder = 'Select pax',
+  className = '',
+  maxAdults = 10,
+  maxTeens = 10,
+  maxChildren = 10,
+  maxInfants = 10,
+  showAddRoom = true,
+  multipleRooms = false,
+  defaultRooms,
+  onRoomsChange,
+  onRemoveRoom,
+  defaultPaxData = DEFAULT_PAX_DATA_WITH_ADULTS,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalData, setInternalData] = useState<PaxData>(value || defaultPaxData || DEFAULT_PAX_DATA);
+  const [rooms, setRooms] = useState<RoomData[]>(
+    defaultRooms || [{ ...DEFAULT_PAX_DATA, roomId: '1' }]
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+  const hasInitialized = useRef(false);
+
+  // Sync internal data with external value prop
+  useEffect(() => {
+    if (value && !multipleRooms) {
+      setInternalData(value);
+    }
+  }, [value, multipleRooms]);
+
+  // Initialize with default pax data and trigger onChange on mount
+  useEffect(() => {
+    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(() => {
+    if (!multipleRooms) {
+      const teenAges = internalData.teenAges || [];
+      const childAges = internalData.childAges || [];
+      const infantAges = internalData.infantAges || [];
+
+      let needsUpdate = false;
+      const updatedData = { ...internalData };
+
+      // Adjust teen ages array
+      if (teenAges.length < internalData.teens) {
+        updatedData.teenAges = [...teenAges, ...Array(internalData.teens - teenAges.length).fill(undefined)];
+        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 = [...childAges, ...Array(internalData.children - childAges.length).fill(undefined)];
+        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 = [...infantAges, ...Array(internalData.infants - infantAges.length).fill(undefined)];
+        needsUpdate = true;
+      } else if (infantAges.length > internalData.infants) {
+        updatedData.infantAges = infantAges.slice(0, internalData.infants);
+        needsUpdate = true;
+      }
+
+      if (needsUpdate) {
+        setInternalData(updatedData);
+        onChange?.(updatedData);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [internalData.teens, internalData.children, internalData.infants, multipleRooms]);
+
+  // Handle clicks outside the dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleDataChange = (field: keyof PaxData, newValue: number | ClientType | number[]) => {
+    const newData = { ...internalData, [field]: newValue };
+    setInternalData(newData);
+    onChange?.(newData);
+  };
+
+  const handleClear = () => {
+    if (multipleRooms) {
+      const clearedRooms = rooms.map(room => ({ ...DEFAULT_PAX_DATA, roomId: room.roomId }));
+      setRooms(clearedRooms);
+      onRoomsChange?.(clearedRooms);
+    } else {
+      const clearedData = { ...DEFAULT_PAX_DATA };
+      setInternalData(clearedData);
+      onChange?.(clearedData);
+    }
+  };
+
+  const handleDone = () => {
+    setIsOpen(false);
+    onDone?.(multipleRooms ? rooms : internalData);
+  };
+
+  const handleAddRoom = () => {
+    const newRoom: RoomData = { 
+      ...DEFAULT_PAX_DATA, 
+      roomId: `${rooms.length + 1}` 
+    };
+    const updatedRooms = [...rooms, newRoom];
+    setRooms(updatedRooms);
+    onRoomsChange?.(updatedRooms);
+    onAddRoom?.();
+  };
+
+  const handleRemoveRoom = (roomId: string) => {
+    const updatedRooms = rooms.filter(room => room.roomId !== roomId);
+    setRooms(updatedRooms);
+    onRoomsChange?.(updatedRooms);
+    onRemoveRoom?.(roomId);
+  };
+
+  const handleRoomChange = (roomId: string, updatedRoom: RoomData) => {
+    const updatedRooms = rooms.map(room => 
+      room.roomId === roomId ? updatedRoom : room
+    );
+    setRooms(updatedRooms);
+    onRoomsChange?.(updatedRooms);
+  };
+
+  const getTotalPax = () => {
+    if (multipleRooms) {
+      return rooms.reduce((total, room) => 
+        total + room.adults + room.teens + room.children + room.infants, 0
+      );
+    }
+    const { adults, teens, children, infants } = internalData;
+    return adults + teens + children + infants;
+  };
+
+  const getDisplayText = () => {
+    const total = getTotalPax();
+    if (total === 0) {
+      return placeholder;
+    }
+    return `${total} pax`;
+  };
+
+  const hasPax = getTotalPax() > 0;
+
+  return (
+    <div className={`pax-selector ${className}`} ref={containerRef}>
+      <button
+        type="button"
+        className="pax-selector__trigger"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <Text size="sm" variant="regular" className="pax-selector__label">
+          {label}
+        </Text>
+        <div className={`pax-selector__input ${isOpen ? 'pax-selector__input--active' : ''}`}>
+          <div className="pax-selector__input-content">
+            <Icon name="user-icon" size="sm" className="pax-selector__input-icon" />
+            <span className={`pax-selector__input-text ${!hasPax ? 'pax-selector__input-placeholder' : ''}`}>
+              {getDisplayText()}
+            </span>
+          </div>
+          <Icon 
+            name="chevron-down" 
+            size="sm" 
+            className={`pax-selector__chevron ${isOpen ? 'pax-selector__chevron--open' : ''}`} 
+          />
+        </div>
+      </button>
+
+      {isOpen && (
+        <div className="pax-selector__dropdown">
+          {/* Multiple Rooms Mode */}
+          {multipleRooms ? (
+            <>
+              {showAddRoom && (
+                <button
+                  type="button"
+                  className="pax-selector__add-room"
+                  onClick={handleAddRoom}
+                >
+                  <Icon name="home" size="sm" className="pax-selector__add-room-icon" />
+                  Add a room
+                  <Icon name="plus" size="sm" className="pax-selector__add-room-icon" />
+                </button>
+              )}
+
+              <div className="pax-selector__rooms">
+                {rooms.map((room, index) => (
+                  <RoomEditor
+                    key={room.roomId}
+                    room={room}
+                    roomNumber={index + 1}
+                    showRemove={rooms.length > 1}
+                    maxAdults={maxAdults}
+                    maxTeens={maxTeens}
+                    maxChildren={maxChildren}
+                    maxInfants={maxInfants}
+                    onChange={(updatedRoom) => handleRoomChange(room.roomId, updatedRoom)}
+                    onRemove={() => handleRemoveRoom(room.roomId)}
+                  />
+                ))}
+              </div>
+            </>
+          ) : (
+            /* Single Room Mode */
+            <>
+              <div className="pax-selector__steppers">
+                <StepperRow
+                  label="Adult"
+                  value={internalData.adults}
+                  max={maxAdults}
+                  onChange={(val) => handleDataChange('adults', val)}
+                />
+                <StepperRow
+                  label="Teen"
+                  value={internalData.teens}
+                  max={maxTeens}
+                  onChange={(val) => handleDataChange('teens', val)}
+                />
+                <StepperRow
+                  label="Child"
+                  value={internalData.children}
+                  max={maxChildren}
+                  onChange={(val) => handleDataChange('children', val)}
+                />
+                <StepperRow
+                  label="Infant"
+                  value={internalData.infants}
+                  max={maxInfants}
+                  onChange={(val) => handleDataChange('infants', val)}
+                />
+              </div>
+
+              {/* Age specification for single room */}
+              {((internalData.teens > 0) || (internalData.children > 0) || (internalData.infants > 0)) && (
+                <div className="pax-selector__age-section">
+                  <Text size="base" variant="bold" className="pax-selector__age-section-title">
+                    Please specify the age :
+                  </Text>
+                  
+                  <div className="pax-selector__age-groups">
+                    {/* Helper function to chunk ages into rows of 2 */}
+                    {(() => {
+                      const chunkAges = (ages: (number | undefined)[], category: string) => {
+                        const chunks: (number | undefined)[][] = [];
+                        for (let i = 0; i < ages.length; i += 2) {
+                          chunks.push(ages.slice(i, i + 2));
+                        }
+                        return chunks;
+                      };
+
+                      const teenAgeChunks = chunkAges(internalData.teenAges || [], 'Teen');
+                      const childAgeChunks = chunkAges(internalData.childAges || [], 'Child');
+                      const infantAgeChunks = chunkAges(internalData.infantAges || [], 'Infant');
+
+                      const handleAgeChange = (category: 'teenAges' | 'childAges' | 'infantAges', index: number, age: number) => {
+                        const ages = [...(internalData[category] || [])];
+                        ages[index] = age;
+                        handleDataChange(category, ages);
+                      };
+
+                      return (
+                        <>
+                          {/* Teen ages */}
+                          {internalData.teens > 0 && teenAgeChunks.map((chunk, chunkIndex) => (
+                            <div key={`teen-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                              {chunk.map((age, ageIndex) => {
+                                const actualIndex = chunkIndex * 2 + ageIndex;
+                                return (
+                                  <AgeSelector
+                                    key={`teen-${actualIndex}`}
+                                    label="Teen"
+                                    value={age}
+                                    onChange={(selectedAge) => handleAgeChange('teenAges', actualIndex, selectedAge)}
+                                    ageRange={CHILD_CATEGORY_AGES}
+                                    required
+                                  />
+                                );
+                              })}
+                            </div>
+                          ))}
+
+                          {/* Child ages */}
+                          {internalData.children > 0 && childAgeChunks.map((chunk, chunkIndex) => (
+                            <div key={`child-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                              {chunk.map((age, ageIndex) => {
+                                const actualIndex = chunkIndex * 2 + ageIndex;
+                                return (
+                                  <AgeSelector
+                                    key={`child-${actualIndex}`}
+                                    label="Child"
+                                    value={age}
+                                    onChange={(selectedAge) => handleAgeChange('childAges', actualIndex, selectedAge)}
+                                    ageRange={CHILD_CATEGORY_AGES}
+                                    required
+                                  />
+                                );
+                              })}
+                            </div>
+                          ))}
+
+                          {/* Infant ages */}
+                          {internalData.infants > 0 && infantAgeChunks.map((chunk, chunkIndex) => (
+                            <div key={`infant-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                              {chunk.map((age, ageIndex) => {
+                                const actualIndex = chunkIndex * 2 + ageIndex;
+                                return (
+                                  <AgeSelector
+                                    key={`infant-${actualIndex}`}
+                                    label="Infant"
+                                    value={age}
+                                    onChange={(selectedAge) => handleAgeChange('infantAges', actualIndex, selectedAge)}
+                                    ageRange={CHILD_CATEGORY_AGES}
+                                    required
+                                  />
+                                );
+                              })}
+                            </div>
+                          ))}
+                        </>
+                      );
+                    })()}
+                  </div>
+                </div>
+              )}
+
+              <ClientTypeSelector
+                value={internalData.clientType}
+                onChange={(val) => handleDataChange('clientType', val)}
+              />
+            </>
+          )}
+
+          <div className="pax-selector__actions">
+            <button
+              type="button"
+              className="pax-selector__clear-btn"
+              onClick={handleClear}
+            >
+              Clear Pax
+            </button>
+            <button
+              type="button"
+              className="pax-selector__done-btn"
+              onClick={handleDone}
+            >
+              Done
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PaxSelector;