mautourco-components 0.2.7 → 0.2.9

package/dist/components/atoms/Icon/Icon.d.ts

@@ -5,6 +5,7 @@ interface IconProps {
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     className?: string;
     color?: string;
+    style?: React.CSSProperties;
 }
 declare const Icon: React.FC<IconProps>;
 export default Icon;

package/dist/components/atoms/Icon/Icon.js

@@ -25,7 +25,6 @@ import EyeIcon from "./icons/EyeIcon";
 import InfoIcon from "./icons/InfoIcon";
 import CheckCircleIcon from "./icons/CheckCircleIcon";
 import StrollerIcon from "./icons/StrollerIcon";
-import ChevronDownIcon from "./icons/ChevronDownIcon";
 import CarIcon from "./icons/CarIcon";
 import MoreIcon from "./icons/MoreIcon";
 import Settings from "./icons/Settings";
@@ -43,8 +42,8 @@ import PlaneIcon from "./icons/PlaneIcon";
 import ShipIcon from "./icons/ShipIcon";
 import BuildingIcon from "./icons/BuildingIcon";
 var Icon = function (_a) {
-    var name = _a.name, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, color = _a.color;
-    var iconProps = { size: size, className: className, color: color };
+    var name = _a.name, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, color = _a.color, style = _a.style;
+    var iconProps = { size: size, className: className, color: color, style: style };
     switch (name) {
         case "chevron-down":
             return _jsx(Chevron, __assign({ direction: "down" }, iconProps));
@@ -85,7 +84,7 @@ var Icon = function (_a) {
         case "stroller":
             return _jsx(StrollerIcon, __assign({}, iconProps));
         case "chevron-down-new":
-            return _jsx(ChevronDownIcon, __assign({}, iconProps));
+            return _jsx(Chevron, __assign({ direction: "down", variant: "filled" }, iconProps));
         case "car":
             return _jsx(CarIcon, __assign({}, iconProps));
         case "more":

package/dist/components/atoms/Icon/icons/Chevron.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 interface ChevronProps {
     direction?: 'up' | 'down' | 'left' | 'right';
+    variant?: 'outline' | 'filled';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     className?: string;
     color?: string;
+    style?: React.CSSProperties;
 }
 declare const Chevron: React.FC<ChevronProps>;
 export default Chevron;

package/dist/components/atoms/Icon/icons/Chevron.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 var Chevron = function (_a) {
-    var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, color = _a.color;
+    var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, _c = _a.variant, variant = _c === void 0 ? 'outline' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.className, className = _e === void 0 ? '' : _e, color = _a.color, style = _a.style;
     var getSizeClasses = function () {
         switch (size) {
             case 'xs': return 'w-3 h-3';
@@ -22,14 +22,13 @@ var Chevron = function (_a) {
             default: return 'w-5 h-5';
         }
     };
-    var getDirectionStyle = function () {
-        switch (direction) {
-            case 'up': return { transform: 'rotate(0deg)' };
-            case 'down': return { transform: 'rotate(0deg)' };
-            case 'left': return { transform: 'rotate(360deg)' };
-            case 'right': return { transform: 'rotate(360deg)' };
-            default: return { transform: 'rotate(0deg)' };
+    var getRotationStyle = function () {
+        if (variant === 'filled') {
+            var rotations = { up: 180, down: 0, left: 90, right: -90 };
+            return { transform: "rotate(".concat(rotations[direction] || 0, "deg)") };
         }
+        // Outline variant doesn't need rotation (paths handle direction)
+        return { transform: 'rotate(0deg)' };
     };
     var getPath = function () {
         switch (direction) {
@@ -46,9 +45,10 @@ var Chevron = function (_a) {
         }
     };
     var sizeClasses = getSizeClasses();
-    var directionStyle = getDirectionStyle();
     var colorClass = color ? "text-".concat(color) : 'text-current';
     var classes = "".concat(sizeClasses, " ").concat(colorClass, " ").concat(className);
-    return (_jsx("svg", __assign({ className: classes, style: directionStyle, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, { children: getPath() })));
+    var rotationStyle = getRotationStyle();
+    var combinedStyle = style ? __assign(__assign({}, rotationStyle), style) : rotationStyle;
+    return variant === 'filled' ? (_jsx("svg", __assign({ className: classes, style: combinedStyle, viewBox: "0 0 15 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M12.4707 0.571533H2.07621C0.87817 0.571533 0.163582 1.90675 0.828137 2.90358L6.02536 10.6994C6.6191 11.59 7.92778 11.59 8.52151 10.6994L13.7187 2.90358C14.3833 1.90675 13.6687 0.571533 12.4707 0.571533Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.14286" }) }))) : (_jsx("svg", __assign({ className: classes, style: combinedStyle, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, { children: getPath() })));
 };
 export default Chevron;

package/dist/components/atoms/Typography/Typography.d.ts

@@ -4,9 +4,11 @@ type BodySizeInput = BodyTokenSize | 'base' | 'xl';
 type Variant = 'light' | 'regular' | 'medium' | 'bold' | 'black';
 type Leading = 'none' | '4' | '5' | '6' | '7';
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type TextColor = 'default' | 'accent' | 'subtle' | 'light' | 'brand' | 'inverted' | 'state-default' | 'state-hover' | 'state-filled' | 'state-disabled' | 'state-error' | 'state-success';
 interface BaseProps {
     variant?: Variant;
     leading?: Leading;
+    color?: TextColor;
     className?: string;
     children: React.ReactNode;
     onClick?: React.MouseEventHandler<Element>;

package/dist/components/atoms/Typography/Typography.js

@@ -66,9 +66,16 @@ var buildVariantClass = function (base, variant) {
         return undefined;
     return "".concat(base, "--").concat(variant);
 };
+var getColorStyle = function (color) {
+    if (!color)
+        return {};
+    return {
+        color: "var(--color-text-".concat(color, ", inherit)"),
+    };
+};
 export var Heading = function (_a) {
     var _b;
-    var _c = _a.level, level = _c === void 0 ? 2 : _c, _d = _a.variant, variant = _d === void 0 ? 'bold' : _d, leading = _a.leading, as = _a.as, _e = _a.className, className = _e === void 0 ? '' : _e, children = _a.children, onClick = _a.onClick;
+    var _c = _a.level, level = _c === void 0 ? 2 : _c, _d = _a.variant, variant = _d === void 0 ? 'bold' : _d, leading = _a.leading, color = _a.color, as = _a.as, _e = _a.className, className = _e === void 0 ? '' : _e, children = _a.children, onClick = _a.onClick;
     var Tag = as || "h".concat(level);
     var baseClass = (_b = headingTokenClass[level]) !== null && _b !== void 0 ? _b : headingTokenClass[2];
     var variantClass = buildVariantClass(baseClass, variant);
@@ -80,10 +87,11 @@ export var Heading = function (_a) {
     ]
         .filter(Boolean)
         .join(' ');
-    return (_jsx(Tag, __assign({ className: classes, onClick: onClick }, { children: children })));
+    var colorStyle = getColorStyle(color);
+    return (_jsx(Tag, __assign({ className: classes, style: colorStyle, onClick: onClick }, { children: children })));
 };
 export var Text = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.variant, variant = _c === void 0 ? 'regular' : _c, leading = _a.leading, as = _a.as, _d = _a.className, className = _d === void 0 ? '' : _d, children = _a.children, onClick = _a.onClick;
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.variant, variant = _c === void 0 ? 'regular' : _c, leading = _a.leading, color = _a.color, as = _a.as, _d = _a.className, className = _d === void 0 ? '' : _d, children = _a.children, onClick = _a.onClick;
     var Tag = as || 'p';
     var normalizedSize = bodySizeAlias[size];
     var _e = getBodyClass(normalizedSize, leading), baseClass = _e.className, lineHeightHandled = _e.lineHeightHandled;
@@ -96,5 +104,6 @@ export var Text = function (_a) {
     ]
         .filter(Boolean)
         .join(' ');
-    return (_jsx(Tag, __assign({ className: classes, onClick: onClick }, { children: children })));
+    var colorStyle = getColorStyle(color);
+    return (_jsx(Tag, __assign({ className: classes, style: colorStyle, onClick: onClick }, { children: children })));
 };

package/dist/components/molecules/RatingTab/RatingTab.js

@@ -36,6 +36,6 @@ var RatingTab = function (_a) {
     };
     var stateClass = disabled ? 'rating-tab--disabled' : checked ? 'rating-tab--active' : 'rating-tab--default';
     var containerClasses = ['rating-tab', stateClass, className].filter(Boolean).join(' ');
-    return (_jsxs("div", __assign({ className: containerClasses, role: "checkbox", "aria-checked": checked, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleToggle, onKeyDown: handleKeyDown }, { children: [_jsxs("div", __assign({ className: "rating-tab__left" }, { children: [_jsx("div", __assign({ className: "rating-tab__checkbox" }, { children: checked && _jsx(Check, { size: "sm", className: "rating-tab__checkbox-icon" }) })), _jsx(Text, __assign({ size: "sm", className: "rating-tab__label" }, { children: label }))] })), _jsx(RatingStar, { value: ratingValue, max: maxStars })] })));
+    return (_jsxs("div", __assign({ className: containerClasses, role: "checkbox", "aria-checked": checked, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleToggle, onKeyDown: handleKeyDown }, { children: [_jsxs("div", __assign({ className: "rating-tab__left" }, { children: [_jsx("div", __assign({ className: "rating-tab__checkbox" }, { children: checked && _jsx(Check, { size: "sm", className: "rating-tab__checkbox-icon" }) })), _jsx(Text, __assign({ size: "sm", color: "default", className: "rating-tab__label" }, { children: label }))] })), _jsx(RatingStar, { value: ratingValue, max: maxStars })] })));
 };
 export default RatingTab;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import '../../../styles/components/molecule/service-selector.css';
+export type ServiceType = 'transfer' | 'accommodation' | 'excursion';
+export interface ServiceOption {
+    value: ServiceType;
+    label: string;
+    icon: string;
+    disabled?: boolean;
+    badge?: string;
+}
+export interface ServiceSelectorProps {
+    /** Selected service */
+    value?: ServiceType;
+    /** Change handler */
+    onChange: (value: ServiceType) => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const ServiceSelector: React.FC<ServiceSelectorProps>;
+export default ServiceSelector;

package/dist/components/molecules/ServiceSelector/ServiceSelector.js

@@ -0,0 +1,85 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import '../../../styles/components/molecule/service-selector.css';
+var DEFAULT_OPTIONS = [
+    {
+        value: 'accommodation',
+        label: 'Accommodation',
+        icon: 'building',
+    },
+    {
+        value: 'transfer',
+        label: 'Transfer',
+        icon: 'car',
+    },
+    {
+        value: 'excursion',
+        label: 'Excursion',
+        icon: 'map-pin',
+        disabled: true,
+        badge: 'Coming soon',
+    },
+];
+var ServiceSelector = function (_a) {
+    var value = _a.value, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
+    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var dropdownRef = useRef(null);
+    // Close dropdown when clicking outside
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    var handleToggleDropdown = function () {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    var handleOptionSelect = function (option) {
+        if (disabled || option.disabled)
+            return;
+        onChange(option.value);
+        setIsOpen(false);
+    };
+    var getDropdownState = function () {
+        if (disabled)
+            return 'disabled';
+        // If a service is selected, always show selected state (even if open)
+        if (value)
+            return 'selected';
+        if (isOpen)
+            return 'open';
+        return 'default';
+    };
+    var selectedOption = value ? DEFAULT_OPTIONS.find(function (opt) { return opt.value === value; }) : null;
+    var displayText = selectedOption ? selectedOption.label : 'Select a service';
+    return (_jsxs("div", __assign({ ref: dropdownRef, className: "service-selector ".concat(className) }, { children: [_jsxs("button", __assign({ type: "button", className: "service-selector__trigger service-selector__trigger--".concat(getDropdownState()), onClick: handleToggleDropdown, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox" }, { children: [_jsxs("div", __assign({ className: "service-selector__trigger-content" }, { children: [selectedOption && (_jsx(Icon, { name: selectedOption.icon, size: "md", className: "service-selector__trigger-icon" })), _jsx(Text, __assign({ size: "base", variant: "bold", className: "service-selector__trigger-text" }, { children: displayText }))] })), _jsx(Icon, { name: "chevron-down-new", size: "sm", className: "service-selector__trigger-chevron", style: {
+                            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                            transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                            transformOrigin: 'center'
+                        } })] })), isOpen && (_jsx("div", __assign({ className: "service-selector__panel", role: "listbox" }, { children: _jsx("div", __assign({ className: "service-selector__content" }, { children: _jsx("div", __assign({ className: "service-selector__options-wrapper" }, { children: DEFAULT_OPTIONS.map(function (option) {
+                            var isSelected = value === option.value;
+                            var isDisabled = option.disabled || disabled;
+                            return (_jsxs("button", __assign({ type: "button", className: "service-selector__option ".concat(isSelected ? 'service-selector__option--selected' : '', " ").concat(isDisabled ? 'service-selector__option--disabled' : ''), onClick: function () { return handleOptionSelect(option); }, disabled: isDisabled, role: "option", "aria-selected": isSelected }, { children: [_jsx(Icon, { name: option.icon, size: "md", className: "service-selector__option-icon ".concat(isSelected ? 'service-selector__option-icon--selected' : '') }), _jsx(Text, __assign({ size: "base", variant: "bold", color: isSelected ? 'inverted' : 'default', className: "service-selector__option-text" }, { children: option.label })), option.badge && (_jsx("span", __assign({ className: "service-selector__option-badge" }, { children: option.badge })))] }), option.value));
+                        }) })) })) })))] })));
+};
+export default ServiceSelector;

package/dist/components/molecules/ServiceSelector/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ServiceSelector';
+export type { ServiceSelectorProps, ServiceType, ServiceOption } from './ServiceSelector';

package/dist/components/molecules/ServiceSelector/index.js

@@ -0,0 +1 @@
+export { default } from './ServiceSelector';

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

@@ -149,7 +149,7 @@ var StepperRow = function (_a) {
             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" }) }))] }))] })));
+    return (_jsxs("div", __assign({ className: "pax-selector__stepper" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", color: "default", 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;
@@ -223,7 +223,7 @@ var RoomEditor = function (_a) {
     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) {
+    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", color: "accent", 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", color: "default", 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) {
@@ -371,7 +371,7 @@ var PaxSelector = function (_a) {
     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 () {
+                    _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", color: "default", 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) {

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

@@ -164,7 +164,7 @@ var SearchBarTransfer = function (_a) {
             onSearch === null || onSearch === void 0 ? void 0 : onSearch(data);
         }
     };
-    return (_jsxs("div", __assign({ className: "search-bar-transfer ".concat(className) }, { children: [_jsxs("div", __assign({ className: "search-bar-transfer__header" }, { children: [_jsx(Heading, __assign({ level: 5, variant: "bold", className: "search-bar-transfer__title" }, { children: "Select your transfer details" })), _jsx("div", __assign({ className: "search-bar-transfer__mode-selector" }, { children: _jsx(SegmentedButton, { options: modeOptions, value: mode, onChange: handleModeChange, name: "transfer-mode" }) }))] })), mode === "roundtrip" ? (_jsx(RoundTrip, { id: "roundtrip-main", locations: locations, paxData: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.paxData, arrivalDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.arrivalDate, departureDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.departureDate, pickupDropoffPoint: (_b = roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.pickupDropoffPoint) === null || _b === void 0 ? void 0 : _b.id, accommodation: (_c = roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.accommodation) === null || _c === void 0 ? void 0 : _c.id, onChange: setRoundTripData })) : (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "search-bar-transfer__transfer-type" }, { children: [_jsx(Text, __assign({ size: "lg", variant: "bold", as: "div", className: "search-bar-transfer__transfer-type-label" }, { children: "Select a transfer type you want to add" })), _jsxs("div", __assign({ className: "search-bar-transfer__add-buttons" }, { children: [_jsx(Button, __assign({ variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return handleAddTransfer("arrival"); } }, { children: "Add Arrival" })), _jsx(Button, __assign({ variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return handleAddTransfer("departure"); } }, { children: "Add Departure" })), _jsx(Button, __assign({ variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return handleAddTransfer("inter-hotel"); } }, { children: "Add Inter-Hotel" }))] }))] })), transferLines.length > 0 && (_jsx("div", __assign({ className: "search-bar-transfer__transfer-lines" }, { children: (function () {
+    return (_jsxs("div", __assign({ className: "search-bar-transfer ".concat(className) }, { children: [_jsxs("div", __assign({ className: "search-bar-transfer__header" }, { children: [_jsx(Heading, __assign({ level: 5, variant: "bold", color: "accent" }, { children: "Select your transfer details" })), _jsx("div", __assign({ className: "search-bar-transfer__mode-selector" }, { children: _jsx(SegmentedButton, { options: modeOptions, value: mode, onChange: handleModeChange, name: "transfer-mode" }) }))] })), mode === "roundtrip" ? (_jsx(RoundTrip, { id: "roundtrip-main", locations: locations, paxData: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.paxData, arrivalDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.arrivalDate, departureDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.departureDate, pickupDropoffPoint: (_b = roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.pickupDropoffPoint) === null || _b === void 0 ? void 0 : _b.id, accommodation: (_c = roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.accommodation) === null || _c === void 0 ? void 0 : _c.id, onChange: setRoundTripData })) : (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "search-bar-transfer__transfer-type" }, { children: [_jsx(Text, __assign({ size: "lg", variant: "bold", color: "subtle", as: "div", className: "search-bar-transfer__transfer-type-label" }, { children: "Select a transfer type you want to add" })), _jsxs("div", __assign({ className: "search-bar-transfer__add-buttons" }, { children: [_jsx(Button, __assign({ variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return handleAddTransfer("arrival"); } }, { children: "Add Arrival" })), _jsx(Button, __assign({ variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return handleAddTransfer("departure"); } }, { children: "Add Departure" })), _jsx(Button, __assign({ variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return handleAddTransfer("inter-hotel"); } }, { children: "Add Inter-Hotel" }))] }))] })), transferLines.length > 0 && (_jsx("div", __assign({ className: "search-bar-transfer__transfer-lines" }, { children: (function () {
                             // Group transfers by type
                             var groupedTransfers = {
                                 arrival: [],
@@ -183,7 +183,7 @@ var SearchBarTransfer = function (_a) {
                                 departure: { label: "Departure", icon: "departure" },
                                 "inter-hotel": { label: "Inter-Hotel", icon: "building" },
                             };
-                            return nonEmptyGroups.map(function (type, groupIndex) { return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: "search-bar-transfer__category-header" }, { children: [_jsx(Icon, { name: categoryInfo[type].icon, size: "md" }), _jsx(Text, __assign({ size: "md", variant: "bold", as: "span" }, { children: categoryInfo[type].label }))] })), groupedTransfers[type].map(function (line) {
+                            return nonEmptyGroups.map(function (type, groupIndex) { return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: "search-bar-transfer__category-header" }, { children: [_jsx(Icon, { name: categoryInfo[type].icon, size: "md" }), _jsx(Text, __assign({ size: "md", variant: "bold", color: "default", as: "span" }, { children: categoryInfo[type].label }))] })), groupedTransfers[type].map(function (line) {
                                         var _a, _b;
                                         return (_jsx(TransferLine, { id: line.id, type: line.type, paxData: line.paxData, transferDate: line.transferDate, pickupPoint: (_a = line.pickupPoint) === null || _a === void 0 ? void 0 : _a.id, dropoffPoint: (_b = line.dropoffPoint) === null || _b === void 0 ? void 0 : _b.id, locations: locations, onDataChange: function (data) { return handleTransferLineChange(line.id, data); }, onDelete: function () { return handleDeleteTransferLine(line.id); }, showDelete: transferLines.length > 1 }, line.id));
                                     }), groupIndex < nonEmptyGroups.length - 1 && (_jsx("svg", __assign({ className: "search-bar-transfer__divider", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "1", viewBox: "0 0 1076 1", fill: "none", preserveAspectRatio: "none" }, { children: _jsx("path", { d: "M0 0.5L1076 0.499906", stroke: "var(--color-border-medium, #A3A3A3)", strokeWidth: "1", strokeDasharray: "10 10" }) })))] }, type)); });

package/dist/components/ui/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "secondary" | "outline" | "default" | "destructive" | "ghost" | null | undefined;
+    variant?: "link" | "outline" | "default" | "secondary" | "destructive" | "ghost" | null | undefined;
     size?: "sm" | "lg" | "default" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export { default as CalendarInput } from './components/molecules/Calendar/Calend
 export { default as TimePicker } from './components/molecules/Calendar/TimePicker';
 export { default as RatingTab } from './components/molecules/RatingTab/RatingTab';
 export { default as LocationDropdown } from './components/molecules/LocationDropdown/LocationDropdown';
+export { default as ServiceSelector } from './components/molecules/ServiceSelector/ServiceSelector';
 export { TopNavigation } from './components/organisms/TopNavigation/TopNavigation';
 export { Footer } from './components/organisms/Footer/Footer';
 export { Dialog } from './components/organisms/Dialog/Dialog';
@@ -43,6 +44,7 @@ export type { DialogProps, DialogSize } from './components/organisms/Dialog/Dial
 export type { CardContainerProps, CardContainerSpacing } from './components/organisms/CardContainer/CardContainer';
 export type { PaxSelectorProps, PaxData, ClientType } from './components/organisms/PaxSelector/PaxSelector';
 export type { LocationDropdownProps, LocationOption, LocationGroup, LocationData } from './components/molecules/LocationDropdown/LocationDropdown';
+export type { ServiceSelectorProps, ServiceType, ServiceOption } from './components/molecules/ServiceSelector/ServiceSelector';
 export type { DateTimePickerProps } from './components/organisms/DateTimePicker/DateTimePicker';
 export type { RoundTripProps, RoundTripData, RoundTripTransfer } from './components/organisms/RoundTrip/RoundTrip';
 export type { TransferLineProps, TransferLineData, TransferType } from './components/organisms/TransferLine/TransferLine';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as CalendarInput } from './components/molecules/Calendar/Calend
 export { default as TimePicker } from './components/molecules/Calendar/TimePicker';
 export { default as RatingTab } from './components/molecules/RatingTab/RatingTab';
 export { default as LocationDropdown } from './components/molecules/LocationDropdown/LocationDropdown';
+export { default as ServiceSelector } from './components/molecules/ServiceSelector/ServiceSelector';
 // Organisms - Complex components
 export { TopNavigation } from './components/organisms/TopNavigation/TopNavigation';
 export { Footer } from './components/organisms/Footer/Footer';