mautourco-components 0.2.7 → 0.2.9

package/dist/styles/components/organism/pax-selector.css

@@ -2236,11 +2236,7 @@
 }
 
 .pax-selector__stepper-label {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-text-default, #262626);
+  /* La couleur est maintenant gérée par la prop color="default" du composant Text */
 }
 
 .pax-selector__stepper-controls {
@@ -2669,11 +2665,7 @@
 }
 
 .pax-selector__age-section-title {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: var(--font-weight-font-bold, 700);
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-text-default, #262626);
+  /* La couleur est maintenant gérée par la prop color="default" du composant Text */
   margin: 0;
 }
 
@@ -2722,11 +2714,7 @@
 }
 
 .pax-selector__room-name {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: var(--font-weight-font-bold, 700);
-  font-size: 18px;
-  line-height: 24px;
-  color: var(--color-text-accent, #0f7173);
+  /* La couleur est maintenant gérée par la prop color="accent" du composant Text */
   margin: 0;
 }
 

package/dist/styles/components/organism/search-bar-transfer.css

@@ -2099,10 +2099,6 @@
   justify-content: space-between;
 }
 
-.search-bar-transfer__title {
-  color: var(--color-text-accent, #0f7173);
-}
-
 /* Mode Selector (Segmented Button) */
 
 .search-bar-transfer__mode-selector {
@@ -2119,9 +2115,7 @@
   justify-content: space-between;
 }
 
-.search-bar-transfer__transfer-type-label {
-  color: var(--color-text-subtle);
-}
+/* La couleur est maintenant gérée par la prop color="subtle" du composant Text */
 
 .search-bar-transfer__add-buttons {
   display: flex;
@@ -2143,7 +2137,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  color: var(--color-text-default);
+  /* La couleur du texte est maintenant gérée par la prop color="default" du composant Text */
 }
 
 /* Divider between categories */
@@ -2215,8 +2209,8 @@
     gap: 1rem;
   }
 
-  .search-bar-transfer__title {
-    /* Responsive: Utiliser les tokens heading-sm (24px) sur mobile */
+  /* Responsive: Réduire la taille du titre sur mobile */
+  .search-bar-transfer__header .heading-md {
     font-size: var(--font-size-text-2xl, 24px);
     line-height: var(--font-leading-leading-2xl, 36px);
   }

package/dist/styles/components/rating-tab.css

@@ -2114,9 +2114,7 @@
   color: var(--checkbox-color-checkbox-checked-default, #0f7173);
 }
 
-.rating-tab__label {
-  color: var(--color-text-default, #262626);
-}
+/* La couleur est maintenant gérée par la prop color="default" du composant Text */
 
 /* States */
 

package/package.json

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

package/src/components/atoms/Icon/Icon.tsx

@@ -14,7 +14,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";
@@ -74,6 +73,7 @@ interface IconProps {
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   className?: string;
   color?: string;
+  style?: React.CSSProperties;
 }
 
 const Icon: React.FC<IconProps> = ({
@@ -81,8 +81,9 @@ const Icon: React.FC<IconProps> = ({
   size = "md",
   className = "",
   color,
+  style,
 }) => {
-  const iconProps = { size, className, color };
+  const iconProps = { size, className, color, style };
 
   switch (name) {
     case "chevron-down":
@@ -124,7 +125,7 @@ const Icon: React.FC<IconProps> = ({
     case "stroller":
       return <StrollerIcon {...iconProps} />;
     case "chevron-down-new":
-      return <ChevronDownIcon {...iconProps} />;
+      return <Chevron direction="down" variant="filled" {...iconProps} />;
     case "car":
       return <CarIcon {...iconProps} />;
     case "more":

package/src/components/atoms/Icon/icons/Chevron.tsx

@@ -2,16 +2,20 @@ 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;
 }
 
 const Chevron: React.FC<ChevronProps> = ({
   direction = 'down',
+  variant = 'outline',
   size = 'md',
   className = '',
-  color
+  color,
+  style
 }) => {
   const getSizeClasses = () => {
     switch (size) {
@@ -24,14 +28,13 @@ const Chevron: React.FC<ChevronProps> = ({
     }
   };
 
-  const getDirectionStyle = () => {
-    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)' };
+  const getRotationStyle = () => {
+    if (variant === 'filled') {
+      const rotations = { up: 180, down: 0, left: 90, right: -90 };
+      return { transform: `rotate(${rotations[direction] || 0}deg)` };
     }
+    // Outline variant doesn't need rotation (paths handle direction)
+    return { transform: 'rotate(0deg)' };
   };
 
   const getPath = () => {
@@ -50,14 +53,30 @@ const Chevron: React.FC<ChevronProps> = ({
   };
 
   const sizeClasses = getSizeClasses();
-  const directionStyle = getDirectionStyle();
   const colorClass = color ? `text-${color}` : 'text-current';
   const classes = `${sizeClasses} ${colorClass} ${className}`;
+  const rotationStyle = getRotationStyle();
+  const combinedStyle = style ? { ...rotationStyle, ...style } : rotationStyle;
 
-  return (
+  return variant === 'filled' ? (
+    <svg
+      className={classes}
+      style={combinedStyle}
+      viewBox="0 0 15 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <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"
+      />
+    </svg>
+  ) : (
     <svg 
       className={classes} 
-      style={directionStyle}
+      style={combinedStyle}
       viewBox="0 0 24 24" 
       fill="none" 
       stroke="currentColor" 

package/src/components/atoms/Typography/Typography.tsx

@@ -5,10 +5,24 @@ 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>;
@@ -91,11 +105,19 @@ const buildVariantClass = (base: string, variant: Variant): string | undefined =
   return `${base}--${variant}`;
 };
 
+const getColorStyle = (color?: TextColor): React.CSSProperties => {
+  if (!color) return {};
+  return {
+    color: `var(--color-text-${color}, inherit)`,
+  };
+};
+
 
 export const Heading: React.FC<HeadingProps> = ({
   level = 2,
   variant = 'bold',
   leading,
+  color,
   as,
   className = '',
   children,
@@ -114,8 +136,10 @@ export const Heading: React.FC<HeadingProps> = ({
     .filter(Boolean)
     .join(' ');
 
+  const colorStyle = getColorStyle(color);
+
   return (
-    <Tag className={classes} onClick={onClick}>
+    <Tag className={classes} style={colorStyle} onClick={onClick}>
       {children}
     </Tag>
   );
@@ -126,6 +150,7 @@ export const Text: React.FC<TextProps> = ({
   size = 'md',
   variant = 'regular',
   leading,
+  color,
   as,
   className = '',
   children,
@@ -145,8 +170,10 @@ export const Text: React.FC<TextProps> = ({
     .filter(Boolean)
     .join(' ');
 
+  const colorStyle = getColorStyle(color);
+
   return (
-    <Tag className={classes} onClick={onClick}>
+    <Tag className={classes} style={colorStyle} onClick={onClick}>
       {children}
     </Tag>
   );

package/src/components/molecules/RatingTab/RatingTab.tsx

@@ -81,7 +81,7 @@ const RatingTab: React.FC<RatingTabProps> = ({
         <div className="rating-tab__checkbox">
           {checked && <Check size="sm" className="rating-tab__checkbox-icon" />}
         </div>
-        <Text size="sm" className="rating-tab__label">
+        <Text size="sm" color="default" className="rating-tab__label">
           {label}
         </Text>
       </div>

package/src/components/molecules/ServiceSelector/ServiceSelector.tsx

@@ -0,0 +1,179 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+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;
+}
+
+const DEFAULT_OPTIONS: ServiceOption[] = [
+  {
+    value: 'accommodation',
+    label: 'Accommodation',
+    icon: 'building',
+  },
+  {
+    value: 'transfer',
+    label: 'Transfer',
+    icon: 'car',
+  },
+  {
+    value: 'excursion',
+    label: 'Excursion',
+    icon: 'map-pin',
+    disabled: true,
+    badge: 'Coming soon',
+  },
+];
+
+const ServiceSelector: React.FC<ServiceSelectorProps> = ({
+  value,
+  onChange,
+  disabled = false,
+  className = '',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const handleToggleDropdown = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const handleOptionSelect = (option: ServiceOption) => {
+    if (disabled || option.disabled) return;
+    onChange(option.value);
+    setIsOpen(false);
+  };
+
+  const getDropdownState = () => {
+    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';
+  };
+
+  const selectedOption = value ? DEFAULT_OPTIONS.find(opt => opt.value === value) : null;
+  const displayText = selectedOption ? selectedOption.label : 'Select a service';
+
+  return (
+    <div ref={dropdownRef} className={`service-selector ${className}`}>
+      <button
+        type="button"
+        className={`service-selector__trigger service-selector__trigger--${getDropdownState()}`}
+        onClick={handleToggleDropdown}
+        disabled={disabled}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        <div className="service-selector__trigger-content">
+          {selectedOption && (
+            <Icon 
+              name={selectedOption.icon as any} 
+              size="md" 
+              className="service-selector__trigger-icon" 
+            />
+          )}
+          <Text 
+            size="base" 
+            variant="bold"
+            className="service-selector__trigger-text"
+          >
+            {displayText}
+          </Text>
+        </div>
+        <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'
+          }}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="service-selector__panel" role="listbox">
+          <div className="service-selector__content">
+            <div className="service-selector__options-wrapper">
+              {DEFAULT_OPTIONS.map((option) => {
+                const isSelected = value === option.value;
+                const isDisabled = option.disabled || disabled;
+                
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    className={`service-selector__option ${isSelected ? 'service-selector__option--selected' : ''} ${isDisabled ? 'service-selector__option--disabled' : ''}`}
+                    onClick={() => handleOptionSelect(option)}
+                    disabled={isDisabled}
+                    role="option"
+                    aria-selected={isSelected}
+                  >
+                    <Icon 
+                      name={option.icon as any} 
+                      size="md" 
+                      className={`service-selector__option-icon ${isSelected ? 'service-selector__option-icon--selected' : ''}`} 
+                    />
+                    <Text 
+                      size="base" 
+                      variant="bold"
+                      color={isSelected ? 'inverted' : 'default'}
+                      className="service-selector__option-text"
+                    >
+                      {option.label}
+                    </Text>
+                    {option.badge && (
+                      <span className="service-selector__option-badge">
+                        {option.badge}
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ServiceSelector;
+

package/src/components/molecules/ServiceSelector/index.ts

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

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

@@ -285,7 +285,7 @@ const StepperRow: React.FC<StepperRowProps> = ({
 
   return (
     <div className="pax-selector__stepper">
-      <Text size="base" variant="bold" className="pax-selector__stepper-label">
+      <Text size="base" variant="bold" color="default" className="pax-selector__stepper-label">
         {label}
       </Text>
       <div className="pax-selector__stepper-controls">
@@ -467,7 +467,7 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
     <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">
+          <Text size="lg" variant="bold" color="accent" className="pax-selector__room-name">
             Room {roomNumber}
           </Text>
           <Icon name="home" size="md" className="pax-selector__room-icon" />
@@ -516,7 +516,7 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
         {/* 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">
+            <Text size="base" variant="bold" color="default" className="pax-selector__age-section-title">
               Please specify the age :
             </Text>
             
@@ -857,7 +857,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
               {/* 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">
+                  <Text size="base" variant="bold" color="default" className="pax-selector__age-section-title">
                     Please specify the age :
                   </Text>
                   

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

@@ -210,7 +210,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     <div className={`search-bar-transfer ${className}`}>
       {/* Header with title and mode selector */}
       <div className="search-bar-transfer__header">
-        <Heading level={5} variant="bold" className="search-bar-transfer__title">
+        <Heading level={5} variant="bold" color="accent">
           Select your transfer details
         </Heading>
 
@@ -241,7 +241,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
         <>
           {/* Transfer type selector */}
           <div className="search-bar-transfer__transfer-type">
-            <Text size="lg" variant="bold" as="div" className="search-bar-transfer__transfer-type-label">
+            <Text size="lg" variant="bold" color="subtle" as="div" className="search-bar-transfer__transfer-type-label">
               Select a transfer type you want to add
             </Text>
             <div className="search-bar-transfer__add-buttons">
@@ -303,7 +303,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
                     {/* Category header */}
                     <div className="search-bar-transfer__category-header">
                       <Icon name={categoryInfo[type].icon} size="md" />
-                      <Text size="md" variant="bold" as="span">
+                      <Text size="md" variant="bold" color="default" as="span">
                         {categoryInfo[type].label}
                       </Text>
                     </div>