mautourco-components 0.2.8 → 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/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/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';