mautourco-components 0.2.89 → 0.2.91

package/README.md

@@ -17,15 +17,15 @@ npm install mautourco-components
 #### Option 1 : Import unique (recommandé)
 
 ```tsx
-// Dans votre index.tsx ou App.tsx
-// Importez tous les styles en une seule ligne
+// In your index.tsx or App.tsx
+// Import all styles in a single line
 import 'mautourco-components/dist/styles/mautourco.css';
 ```
 
 #### Option 2 : Imports individuels (si vous n'avez besoin que de certains composants)
 
 ```tsx
-// Importez uniquement les styles dont vous avez besoin
+// Import only the styles you need
 import 'mautourco-components/dist/styles/tokens/tokens.css';
 import 'mautourco-components/dist/styles/components/forms.css';
 import 'mautourco-components/dist/styles/components/typography.css';
@@ -86,7 +86,7 @@ const Logo = () => <Icon name="mautourcoLogo" size="md" />;
 
 function App() {
   const handleLinkClick = (link: { label: string; route: string }) => {
-    // Gérer la navigation (ex: avec React Router)
+    // Handle navigation (e.g., with React Router)
     console.log('Navigation vers:', link.route);
   };
 
@@ -102,7 +102,7 @@ function App() {
         onLogout={() => console.log('Logout')}
       />
 
-      {/* Votre contenu principal */}
+      {/* Your main content */}
       <main>...</main>
 
       <Footer
@@ -185,7 +185,7 @@ function App() {
 ## Mise à jour du package
 
 ```bash
-# Dans votre projet
+# In your project
 npm update mautourco-components
 ```
 
@@ -196,7 +196,9 @@ npm update mautourco-components
 ```bash
 npm run build:package    # Build du package pour distribution
 npm run build-tokens     # Génération des design tokens
-npm run storybook        # Démarre Storybook
+npm run storybook        # Démarre Storybook en mode développement
+npm run storybook:dev    # Démarre Storybook avec watch des tokens
+npm run build-storybook  # Build Storybook pour production
 npm publish             # Publication sur npm (après login)
 ```
 

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

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { IconName } from '../../atoms/Icon/icons/registry';
+export type AccordionVariant = 'normal' | 'brand';
+export interface AccordionProps {
+    /** Title text displayed in the accordion header */
+    title: string;
+    /** Content to be displayed when accordion is expanded */
+    children: ReactNode;
+    /** Whether the accordion is expanded by default */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state */
+    expanded?: boolean;
+    /** Callback when accordion expanded state changes */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Leading icon name to display before the title */
+    leadingIcon?: IconName;
+    /** Whether the accordion is disabled */
+    disabled?: boolean;
+    /** Visual variant of the accordion */
+    variant?: AccordionVariant;
+    /** Additional CSS classes */
+    className?: string;
+    /** ID for accessibility */
+    id?: string;
+}
+/**
+ * Accordion component - A collapsible content container that expands or collapses
+ * when the header is clicked or tapped.
+ *
+ * @example
+ * <Accordion title="Accordion title">
+ *   Content goes here
+ * </Accordion>
+ *
+ * @example
+ * <Accordion title="With leading icon" leadingIcon="info">
+ *   Content with a leading icon
+ * </Accordion>
+ */
+declare function Accordion(props: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export default Accordion;

package/dist/components/molecules/Accordion/Accordion.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useState } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+/**
+ * Accordion component - A collapsible content container that expands or collapses
+ * when the header is clicked or tapped.
+ *
+ * @example
+ * <Accordion title="Accordion title">
+ *   Content goes here
+ * </Accordion>
+ *
+ * @example
+ * <Accordion title="With leading icon" leadingIcon="info">
+ *   Content with a leading icon
+ * </Accordion>
+ */
+function Accordion(props) {
+    var title = props.title, children = props.children, _a = props.defaultExpanded, defaultExpanded = _a === void 0 ? false : _a, controlledExpanded = props.expanded, onExpandedChange = props.onExpandedChange, leadingIcon = props.leadingIcon, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.variant, variant = _c === void 0 ? 'normal' : _c, _d = props.className, className = _d === void 0 ? '' : _d, providedId = props.id;
+    var generatedId = useId();
+    var id = providedId || generatedId;
+    var headerId = "".concat(id, "-header");
+    var contentId = "".concat(id, "-content");
+    // Handle controlled vs uncontrolled state
+    var _e = useState(defaultExpanded), internalExpanded = _e[0], setInternalExpanded = _e[1];
+    var isControlled = controlledExpanded !== undefined;
+    var isExpanded = isControlled ? controlledExpanded : internalExpanded;
+    var handleToggle = useCallback(function () {
+        if (disabled)
+            return;
+        var newExpanded = !isExpanded;
+        if (!isControlled) {
+            setInternalExpanded(newExpanded);
+        }
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(newExpanded);
+    }, [disabled, isExpanded, isControlled, onExpandedChange]);
+    var handleKeyDown = useCallback(function (event) {
+        if (disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleToggle();
+        }
+    }, [disabled, handleToggle]);
+    var classNames = [
+        'accordion',
+        isExpanded && 'accordion--expanded',
+        disabled && 'accordion--disabled',
+        variant === 'brand' && 'accordion--brand',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: classNames, id: id, children: [_jsxs("div", { className: "accordion__header", id: headerId, role: "button", tabIndex: disabled ? -1 : 0, "aria-expanded": isExpanded, "aria-controls": contentId, "aria-disabled": disabled, onClick: handleToggle, onKeyDown: handleKeyDown, children: [_jsxs("div", { className: "accordion__title", children: [leadingIcon && (_jsx("div", { className: "accordion__leading-icon", children: _jsx(Icon, { name: leadingIcon, size: "lg" }) })), _jsx("span", { className: "accordion__title-text", children: title })] }), _jsx("div", { className: "accordion__chevron", children: _jsx(Icon, { name: 'chevron-up', size: "lg" }) })] }), isExpanded && (_jsx("div", { className: "accordion__body", id: contentId, role: "region", "aria-labelledby": headerId, children: _jsx("div", { className: "accordion__content", children: children }) }))] }));
+}
+export default Accordion;

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

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion';
+export type { AccordionProps, AccordionVariant } from './Accordion';

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

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

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

@@ -27,6 +27,7 @@ import Icon from "../../atoms/Icon/Icon";
 import SegmentedButton from "../../atoms/SegmentedButton/SegmentedButton";
 import { Heading, Text } from "../../atoms/Typography/Typography";
 import Toast from "../../molecules/Toast/Toast";
+import { DEFAULT_PAX_DATA_WITH_ADULTS } from "../PaxSelector/PaxSelector";
 import RoundTrip from "../RoundTrip/RoundTrip";
 import TransferLine from "../TransferLine/TransferLine";
 var transferIdCounter = 0;
@@ -63,15 +64,40 @@ var SearchBarTransfer = function (_a) {
         { value: "roundtrip", label: "Round trip" },
         { value: "custom", label: "Custom transfer" },
     ];
-    // Helper function to check if roundtrip data is empty or has data
+    // Helper function to check if pax data is at default state (unchanged by user)
+    var isDefaultPaxData = function (paxData) {
+        if (!paxData)
+            return true;
+        // Compare with DEFAULT_PAX_DATA_WITH_ADULTS
+        return (paxData.adults === DEFAULT_PAX_DATA_WITH_ADULTS.adults &&
+            paxData.teens === DEFAULT_PAX_DATA_WITH_ADULTS.teens &&
+            paxData.children === DEFAULT_PAX_DATA_WITH_ADULTS.children &&
+            paxData.infants === DEFAULT_PAX_DATA_WITH_ADULTS.infants);
+    };
+    // Helper function to check if roundtrip data is empty or has data (at least one field)
     var hasRoundtripData = function (data) {
+        var _a, _b;
         if (!data)
             return false;
-        // Check if at least one field has data (half or full data)
-        return !!(data.paxData ||
+        // Check if pax data is not default (user actually changed it)
+        var hasNonDefaultPax = data.paxData && !isDefaultPaxData(data.paxData);
+        var airportDroppOffPoint = (_a = locations.options) === null || _a === void 0 ? void 0 : _a.find(function (option) { return option.type === 'airport' || option.type === 'port'; });
+        // Check if pickupDropoffPoint has changed from default
+        var hasChangedPickupDropoff = ((_b = data.pickupDropoffPoint) === null || _b === void 0 ? void 0 : _b.id) !== (airportDroppOffPoint === null || airportDroppOffPoint === void 0 ? void 0 : airportDroppOffPoint.id);
+        return !!(hasNonDefaultPax ||
             data.arrivalDate ||
             data.departureDate ||
-            data.pickupDropoffPoint ||
+            hasChangedPickupDropoff ||
+            data.accommodation);
+    };
+    // Helper function to check if ALL roundtrip data fields are filled
+    var isRoundtripDataComplete = function (data) {
+        if (!data)
+            return false;
+        return !!(data.paxData &&
+            data.arrivalDate &&
+            data.departureDate &&
+            data.pickupDropoffPoint &&
             data.accommodation);
     };
     // Helper function to create prefilled transfer lines from roundtrip data
@@ -125,11 +151,26 @@ var SearchBarTransfer = function (_a) {
         setMode(transferMode);
         setError(null);
     };
+    // Get the last inputted pax data from existing transfer lines
+    var getLastInputtedPaxData = function () {
+        // Find the last transfer line that has pax data
+        for (var i = transferLines.length - 1; i >= 0; i--) {
+            if (transferLines[i].paxData) {
+                console.log({ i: i });
+                return transferLines[i].paxData;
+            }
+        }
+        return undefined;
+    };
     // Handle adding transfer lines
     var handleAddTransfer = function (type) {
+        // Get the last inputted pax data to prefill the new transfer
+        var lastPaxData = getLastInputtedPaxData();
         var newTransfer = {
             id: generateTransferId(),
             type: type,
+            // Nb of pax should be the same as the last inputted nb of pax
+            paxData: lastPaxData,
         };
         if (transferLines.length > 0) {
             // If adding inter-hotel, set pickup point to the dropoff of latest arrival
@@ -156,7 +197,7 @@ var SearchBarTransfer = function (_a) {
     // Handle adding transfer from round-trip mode (switches to custom and adds new transfer)
     var handleAddTransferFromRoundTrip = function (type) {
         var newTransferLines = [];
-        if (hasRoundtripData(roundTripData)) {
+        if (isRoundtripDataComplete(roundTripData)) {
             // Half/full Roundtrip data → prefilled arrival & departure + Adding the appropriate transfer type (2h)
             var prefilledLines = createPrefilledTransferLines(roundTripData);
             // Add the new transfer of the clicked type with prefilled data
@@ -187,6 +228,33 @@ var SearchBarTransfer = function (_a) {
             // Combine prefilled lines with the new transfer
             newTransferLines = __spreadArray(__spreadArray([], prefilledLines, true), [newTransfer], false);
         }
+        else if (hasRoundtripData(roundTripData)) {
+            var newTransfer = {
+                id: generateTransferId(),
+                type: type,
+                paxData: roundTripData.paxData,
+                // Use the appropriate date based on transfer type
+                transferDate: type === "arrival"
+                    ? roundTripData.arrivalDate
+                    : type === "departure"
+                        ? roundTripData.departureDate
+                        : undefined,
+                // Use appropriate pickup/dropoff points based on transfer type
+                pickupPoint: type === "arrival"
+                    ? roundTripData.pickupDropoffPoint
+                    : type === "departure"
+                        ? roundTripData.accommodation
+                        : type === "inter-hotel"
+                            ? roundTripData.accommodation // Inter-hotel pickup = arrival's dropoff (accommodation)
+                            : undefined,
+                dropoffPoint: type === "arrival"
+                    ? roundTripData.accommodation
+                    : type === "departure"
+                        ? roundTripData.pickupDropoffPoint
+                        : undefined,
+            };
+            newTransferLines = [newTransfer];
+        }
         else {
             // Empty Roundtrip data → Adding the appropriate transfer type (1h)
             var newTransfer = {

package/dist/styles/components/molecule/accordion.css

@@ -0,0 +1,193 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* Accordion Component Styles */
+
+.accordion {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+/* Header Base */
+
+.accordion__header {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  border-width: 1px;
+  border-style: solid;
+  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  padding: var(--accordion-spacing-body-padding-y, 16px);
+  background-color: var(--accordion-color-header-normal-background-default, white);
+  border-color: var(--accordion-color-header-normal-border-default, #a3a3a3);
+  border-radius: var(--accordion-border-radius-default, 8px);
+}
+
+.accordion__header:hover {
+  background-color: var(--accordion-color-header-normal-background-hover, #f5f5f5);
+}
+
+.accordion__header:active {
+  background-color: var(--accordion-color-header-normal-background-pressed, #d9d9d9);
+}
+
+.accordion__header:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  background-color: var(--accordion-color-header-normal-background-focused, white);
+}
+
+.accordion__header:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-icon-default, black);
+}
+
+/* Header when expanded */
+
+.accordion--expanded .accordion__header {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-width: 0;
+}
+
+/* Disabled state */
+
+.accordion--disabled .accordion__header {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.accordion--disabled .accordion__header:hover,
+.accordion--disabled .accordion__header:active {
+  background-color: var(--accordion-color-header-normal-background-default, white);
+}
+
+/* Title container */
+
+.accordion__title {
+  display: flex;
+  align-items: center;
+  gap: var(--accordion-spacing-title-gap, 8px);
+}
+
+/* Leading icon */
+
+.accordion__leading-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+/* Title text */
+
+.accordion__title-text {
+  font-weight: 700;
+  color: var(--accordion-color-header-normal-foreground-default, #262626);
+  font-family: var(--font-font-family-body, 'Satoshi', sans-serif);
+  font-size: var(--font-size-text-base, 16px);
+  line-height: var(--font-leading-leading-md, 24px);
+}
+
+/* Chevron icon */
+
+.accordion__chevron {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  width: 24px;
+  height: 24px;
+  color: var(--accordion-color-header-normal-foreground-default, #262626);
+}
+
+.accordion--expanded .accordion__chevron {
+  transform: rotate(180deg);
+}
+
+/* Body */
+
+.accordion__body {
+  overflow: hidden;
+  border-width: 1px;
+  border-top-width: 0px;
+  border-style: solid;
+  background-color: var(--accordion-color-select-background-default, white);
+  border-color: var(--accordion-color-header-normal-border-default, #a3a3a3);
+  border-bottom-left-radius: var(--accordion-border-radius-default, 8px);
+  border-bottom-right-radius: var(--accordion-border-radius-default, 8px);
+}
+
+/* Body content */
+
+.accordion__content {
+  display: flex;
+  flex-direction: column;
+  padding-left: var(--accordion-spacing-body-padding-y, 16px);
+  padding-right: var(--accordion-spacing-body-padding-y, 16px);
+  padding-top: var(--accordion-spacing-body-padding-x, 8px);
+  padding-bottom: var(--accordion-spacing-body-padding-y, 16px);
+}
+
+/* Body text style */
+
+.accordion__content p {
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, 'Satoshi', sans-serif);
+  font-size: var(--font-size-text-base, 16px);
+  line-height: var(--font-leading-leading-md, 24px);
+}
+
+/* Animation */
+
+.accordion__body--entering,
+.accordion__body--exiting {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.accordion__body--collapsed {
+  max-height: 0;
+  opacity: 0;
+}
+
+.accordion__body--expanded {
+  opacity: 1;
+}
+
+/* Brand variant */
+
+.accordion--brand .accordion__title-text {
+  color: var(--accordion-color-header-brand-foreground-default, var(--color-text-accent));
+}
+
+.accordion--brand .accordion__chevron {
+  color: var(--accordion-color-header-brand-foreground-default, var(--color-text-accent));
+}
+
+/* Scroll style variant */
+
+.accordion--scroll .accordion__content {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--accordion-spacing-body-gap, 10px);
+}
+
+.accordion--scroll .accordion__content-inner {
+  flex: 1 1 0%;
+  overflow-y: auto;
+  max-height: 135px;
+}

package/dist/styles/mautourco.css

@@ -10,6 +10,7 @@
 @import "./components/forms.css";
 @import "./components/illustration.css";
 @import "./components/molecule/accomodation-docket.css";
+@import "./components/molecule/accordion.css";
 @import "./components/molecule/age-selector.css";
 @import "./components/molecule/calendarInput.css";
 @import "./components/molecule/dateTime.css";

package/package.json

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

package/src/components/molecules/Accordion/Accordion.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import Accordion from './Accordion';
+
+const meta = {
+  title: 'Molecules/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    onExpandedChange: { action: 'expanded changed' },
+    variant: {
+      control: { type: 'select' },
+      options: ['normal', 'brand'],
+    },
+    leadingIcon: {
+      control: { type: 'select' },
+      options: [undefined, 'info', 'calendar', 'user', 'settings', 'booking', 'map-pin'],
+    },
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: 'Accordion title',
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  },
+};
+
+export const Expanded: Story = {
+  args: {
+    title: 'Accordion title',
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    defaultExpanded: true,
+  },
+};
+
+export const WithLeadingIcon: Story = {
+  args: {
+    title: 'Accordion title',
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    leadingIcon: 'booking',
+  },
+};
+
+export const WithLeadingIconExpanded: Story = {
+  args: {
+    title: 'Accordion title',
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    leadingIcon: 'booking',
+    defaultExpanded: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    title: 'Accordion title',
+    children: 'This content is hidden because the accordion is disabled.',
+    disabled: true,
+  },
+};
+
+export const BrandVariant: Story = {
+  args: {
+    title: 'Accordion title',
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    variant: 'brand',
+    leadingIcon: 'info',
+  },
+};
+
+export const WithCustomContent: Story = {
+  args: {
+    title: 'Flight Details',
+    leadingIcon: 'plane-takeoff-outline',
+    children: (
+      <div className="flex flex-col gap-2">
+        <div className="flex justify-between">
+          <span className="text-neutral-500">Departure</span>
+          <span className="font-medium">10:00 AM</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-neutral-500">Arrival</span>
+          <span className="font-medium">2:30 PM</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-neutral-500">Duration</span>
+          <span className="font-medium">4h 30m</span>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const MultipleAccordions: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[400px]">
+      <Accordion title="Section 1" leadingIcon="info">
+        Content for section 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </Accordion>
+      <Accordion title="Section 2" leadingIcon="calendar">
+        Content for section 2. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </Accordion>
+      <Accordion title="Section 3" leadingIcon="settings">
+        Content for section 3. Ut enim ad minim veniam, quis nostrud exercitation.
+      </Accordion>
+    </div>
+  ),
+};
+
+export const Controlled: Story = {
+  render: function ControlledAccordion() {
+    const [expanded, setExpanded] = useState(false);
+
+    return (
+      <div className="flex flex-col gap-4 w-[400px]">
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        >
+          {expanded ? 'Collapse' : 'Expand'} Accordion
+        </button>
+        <Accordion
+          title="Controlled Accordion"
+          expanded={expanded}
+          onExpandedChange={setExpanded}
+          leadingIcon="info"
+        >
+          This accordion is controlled externally. Click the button above to toggle.
+        </Accordion>
+      </div>
+    );
+  },
+};

package/src/components/molecules/Accordion/Accordion.tsx

@@ -0,0 +1,142 @@
+import React, { ReactNode, useCallback, useId, useState } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { IconName } from '../../atoms/Icon/icons/registry';
+
+export type AccordionVariant = 'normal' | 'brand';
+
+export interface AccordionProps {
+  /** Title text displayed in the accordion header */
+  title: string;
+  /** Content to be displayed when accordion is expanded */
+  children: ReactNode;
+  /** Whether the accordion is expanded by default */
+  defaultExpanded?: boolean;
+  /** Controlled expanded state */
+  expanded?: boolean;
+  /** Callback when accordion expanded state changes */
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Leading icon name to display before the title */
+  leadingIcon?: IconName;
+  /** Whether the accordion is disabled */
+  disabled?: boolean;
+  /** Visual variant of the accordion */
+  variant?: AccordionVariant;
+  /** Additional CSS classes */
+  className?: string;
+  /** ID for accessibility */
+  id?: string;
+}
+
+/**
+ * Accordion component - A collapsible content container that expands or collapses
+ * when the header is clicked or tapped.
+ *
+ * @example
+ * <Accordion title="Accordion title">
+ *   Content goes here
+ * </Accordion>
+ *
+ * @example
+ * <Accordion title="With leading icon" leadingIcon="info">
+ *   Content with a leading icon
+ * </Accordion>
+ */
+function Accordion(props: AccordionProps) {
+  const {
+    title,
+    children,
+    defaultExpanded = false,
+    expanded: controlledExpanded,
+    onExpandedChange,
+    leadingIcon,
+    disabled = false,
+    variant = 'normal',
+    className = '',
+    id: providedId,
+  } = props;
+
+  const generatedId = useId();
+  const id = providedId || generatedId;
+  const headerId = `${id}-header`;
+  const contentId = `${id}-content`;
+
+  // Handle controlled vs uncontrolled state
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const isControlled = controlledExpanded !== undefined;
+  const isExpanded = isControlled ? controlledExpanded : internalExpanded;
+
+  const handleToggle = useCallback(() => {
+    if (disabled) return;
+
+    const newExpanded = !isExpanded;
+
+    if (!isControlled) {
+      setInternalExpanded(newExpanded);
+    }
+
+    onExpandedChange?.(newExpanded);
+  }, [disabled, isExpanded, isControlled, onExpandedChange]);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (disabled) return;
+
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        handleToggle();
+      }
+    },
+    [disabled, handleToggle]
+  );
+
+  const classNames = [
+    'accordion',
+    isExpanded && 'accordion--expanded',
+    disabled && 'accordion--disabled',
+    variant === 'brand' && 'accordion--brand',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={classNames} id={id}>
+      <div
+        className="accordion__header"
+        id={headerId}
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-expanded={isExpanded}
+        aria-controls={contentId}
+        aria-disabled={disabled}
+        onClick={handleToggle}
+        onKeyDown={handleKeyDown}
+      >
+        <div className="accordion__title">
+          {leadingIcon && (
+            <div className="accordion__leading-icon">
+              <Icon name={leadingIcon} size="lg" />
+            </div>
+          )}
+          <span className="accordion__title-text">{title}</span>
+        </div>
+        <div className="accordion__chevron">
+          <Icon name={'chevron-up'} size="lg" />
+        </div>
+      </div>
+
+      {isExpanded && (
+        <div
+          className="accordion__body"
+          id={contentId}
+          role="region"
+          aria-labelledby={headerId}
+        >
+          <div className="accordion__content">{children}</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Accordion;

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

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion';
+export type { AccordionProps, AccordionVariant } from './Accordion';

package/src/components/organisms/CarBookingCard/index.ts

@@ -10,3 +10,4 @@ export type {
     CarBookingCardSkeletonProps,
     CarBookingCardSkeletonSize
 } from './CarBookingCardSkeleton';
+

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

@@ -7,6 +7,7 @@ import SegmentedButton, { SegmentedButtonOption } from "../../atoms/SegmentedBut
 import { Heading, Text } from "../../atoms/Typography/Typography";
 import { LocationGroup, LocationOption } from "../../molecules/LocationDropdown/LocationDropdown";
 import Toast from "../../molecules/Toast/Toast";
+import { DEFAULT_PAX_DATA_WITH_ADULTS } from "../PaxSelector/PaxSelector";
 import RoundTrip, { RoundTripData } from "../RoundTrip/RoundTrip";
 import TransferLine, {
     TransferLineData,
@@ -102,15 +103,45 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     { value: "custom", label: "Custom transfer" },
   ];
 
-  // Helper function to check if roundtrip data is empty or has data
+  // Helper function to check if pax data is at default state (unchanged by user)
+  const isDefaultPaxData = (paxData?: RoundTripData['paxData']): boolean => {
+    if (!paxData) return true;
+    // Compare with DEFAULT_PAX_DATA_WITH_ADULTS
+    return (
+      paxData.adults === DEFAULT_PAX_DATA_WITH_ADULTS.adults &&
+      paxData.teens === DEFAULT_PAX_DATA_WITH_ADULTS.teens &&
+      paxData.children === DEFAULT_PAX_DATA_WITH_ADULTS.children &&
+      paxData.infants === DEFAULT_PAX_DATA_WITH_ADULTS.infants
+    );
+  };
+
+  // Helper function to check if roundtrip data is empty or has data (at least one field)
   const hasRoundtripData = (data?: RoundTripData): boolean => {
     if (!data) return false;
-    // Check if at least one field has data (half or full data)
+    // Check if pax data is not default (user actually changed it)
+    const hasNonDefaultPax = data.paxData && !isDefaultPaxData(data.paxData);
+
+    const airportDroppOffPoint = locations.options?.find(option => option.type === 'airport' || option.type === 'port');
+    // Check if pickupDropoffPoint has changed from default
+    const hasChangedPickupDropoff = data.pickupDropoffPoint?.id !== airportDroppOffPoint?.id;
+
     return !!(
-      data.paxData ||
-      data.arrivalDate ||
-      data.departureDate ||
-      data.pickupDropoffPoint ||
+        hasNonDefaultPax ||
+        data.arrivalDate ||
+        data.departureDate ||
+        hasChangedPickupDropoff ||
+        data.accommodation
+      );
+  };
+
+  // Helper function to check if ALL roundtrip data fields are filled
+  const isRoundtripDataComplete = (data?: RoundTripData): boolean => {
+    if (!data) return false;
+    return !!(
+      data.paxData &&
+      data.arrivalDate &&
+      data.departureDate &&
+      data.pickupDropoffPoint &&
       data.accommodation
     );
   };
@@ -170,11 +201,30 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     setError(null);
   };
 
+  // Get the last inputted pax data from existing transfer lines
+  const getLastInputtedPaxData = () => {
+    // Find the last transfer line that has pax data
+    
+    for (let i = transferLines.length - 1; i >= 0; i--) {
+      if (transferLines[i].paxData) {
+        console.log({i});
+        
+        return transferLines[i].paxData;
+      }
+    }
+    return undefined;
+  };
+
   // Handle adding transfer lines
   const handleAddTransfer = (type: TransferType) => {
+    // Get the last inputted pax data to prefill the new transfer
+    const lastPaxData = getLastInputtedPaxData();
+
     const newTransfer: TransferLineData = {
       id: generateTransferId(),
       type,
+      // Nb of pax should be the same as the last inputted nb of pax
+      paxData: lastPaxData,
     };
 
     if (transferLines.length > 0) {
@@ -236,7 +286,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
   const handleAddTransferFromRoundTrip = (type: TransferType) => {
     let newTransferLines: TransferLineData[] = [];
 
-    if (hasRoundtripData(roundTripData)) {
+    if (isRoundtripDataComplete(roundTripData)) {
       // Half/full Roundtrip data → prefilled arrival & departure + Adding the appropriate transfer type (2h)
       const prefilledLines = createPrefilledTransferLines(roundTripData!);
       
@@ -268,6 +318,32 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
       
       // Combine prefilled lines with the new transfer
       newTransferLines = [...prefilledLines, newTransfer];
+    } else if (hasRoundtripData(roundTripData)) {
+        const newTransfer: TransferLineData = {
+            id: generateTransferId(),
+            type,
+            paxData: roundTripData!.paxData,
+            // Use the appropriate date based on transfer type
+            transferDate: type === "arrival" 
+              ? roundTripData!.arrivalDate 
+              : type === "departure" 
+                ? roundTripData!.departureDate 
+                : undefined,
+            // Use appropriate pickup/dropoff points based on transfer type
+            pickupPoint: type === "arrival" 
+              ? roundTripData!.pickupDropoffPoint 
+              : type === "departure" 
+                ? roundTripData!.accommodation 
+                : type === "inter-hotel"
+                  ? roundTripData!.accommodation // Inter-hotel pickup = arrival's dropoff (accommodation)
+                  : undefined,
+            dropoffPoint: type === "arrival" 
+              ? roundTripData!.accommodation 
+              : type === "departure" 
+                ? roundTripData!.pickupDropoffPoint 
+                : undefined,
+          };
+          newTransferLines = [newTransfer];
     } else {
       // Empty Roundtrip data → Adding the appropriate transfer type (1h)
       const newTransfer: TransferLineData = {

package/src/styles/components/molecule/accordion.css

@@ -0,0 +1,146 @@
+/* Accordion Component Styles */
+
+.accordion {
+  @apply flex flex-col w-full;
+}
+
+/* Header Base */
+.accordion__header {
+  @apply flex items-center justify-between w-full cursor-pointer;
+  @apply border border-solid;
+  @apply transition-colors duration-200;
+  padding: var(--accordion-spacing-body-padding-y, 16px);
+  background-color: var(--accordion-color-header-normal-background-default, white);
+  border-color: var(--accordion-color-header-normal-border-default, #a3a3a3);
+  border-radius: var(--accordion-border-radius-default, 8px);
+}
+
+.accordion__header:hover {
+  background-color: var(--accordion-color-header-normal-background-hover, #f5f5f5);
+}
+
+.accordion__header:active {
+  background-color: var(--accordion-color-header-normal-background-pressed, #d9d9d9);
+}
+
+.accordion__header:focus {
+  @apply outline-none;
+  background-color: var(--accordion-color-header-normal-background-focused, white);
+}
+
+.accordion__header:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-icon-default, black);
+}
+
+/* Header when expanded */
+.accordion--expanded .accordion__header {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-width: 0;
+}
+
+/* Disabled state */
+.accordion--disabled .accordion__header {
+  @apply cursor-not-allowed opacity-50;
+}
+
+.accordion--disabled .accordion__header:hover,
+.accordion--disabled .accordion__header:active {
+  background-color: var(--accordion-color-header-normal-background-default, white);
+}
+
+/* Title container */
+.accordion__title {
+  @apply flex items-center;
+  gap: var(--accordion-spacing-title-gap, 8px);
+}
+
+/* Leading icon */
+.accordion__leading-icon {
+  @apply flex items-center justify-center shrink-0;
+  width: 24px;
+  height: 24px;
+}
+
+/* Title text */
+.accordion__title-text {
+  @apply font-bold;
+  color: var(--accordion-color-header-normal-foreground-default, #262626);
+  font-family: var(--font-font-family-body, 'Satoshi', sans-serif);
+  font-size: var(--font-size-text-base, 16px);
+  line-height: var(--font-leading-leading-md, 24px);
+}
+
+/* Chevron icon */
+.accordion__chevron {
+  @apply flex items-center justify-center shrink-0;
+  @apply transition-transform duration-200;
+  width: 24px;
+  height: 24px;
+  color: var(--accordion-color-header-normal-foreground-default, #262626);
+}
+
+.accordion--expanded .accordion__chevron {
+  transform: rotate(180deg);
+}
+
+/* Body */
+.accordion__body {
+  @apply border border-solid border-t-0 overflow-hidden;
+  background-color: var(--accordion-color-select-background-default, white);
+  border-color: var(--accordion-color-header-normal-border-default, #a3a3a3);
+  border-bottom-left-radius: var(--accordion-border-radius-default, 8px);
+  border-bottom-right-radius: var(--accordion-border-radius-default, 8px);
+}
+
+/* Body content */
+.accordion__content {
+  @apply flex flex-col;
+  padding-left: var(--accordion-spacing-body-padding-y, 16px);
+  padding-right: var(--accordion-spacing-body-padding-y, 16px);
+  padding-top: var(--accordion-spacing-body-padding-x, 8px);
+  padding-bottom: var(--accordion-spacing-body-padding-y, 16px);
+}
+
+/* Body text style */
+.accordion__content p {
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, 'Satoshi', sans-serif);
+  font-size: var(--font-size-text-base, 16px);
+  line-height: var(--font-leading-leading-md, 24px);
+}
+
+/* Animation */
+.accordion__body--entering,
+.accordion__body--exiting {
+  @apply transition-all duration-200;
+}
+
+.accordion__body--collapsed {
+  max-height: 0;
+  opacity: 0;
+}
+
+.accordion__body--expanded {
+  opacity: 1;
+}
+
+/* Brand variant */
+.accordion--brand .accordion__title-text {
+  color: var(--accordion-color-header-brand-foreground-default, var(--color-text-accent));
+}
+
+.accordion--brand .accordion__chevron {
+  color: var(--accordion-color-header-brand-foreground-default, var(--color-text-accent));
+}
+
+/* Scroll style variant */
+.accordion--scroll .accordion__content {
+  @apply flex-row items-center;
+  gap: var(--accordion-spacing-body-gap, 10px);
+}
+
+.accordion--scroll .accordion__content-inner {
+  @apply flex-1 overflow-y-auto;
+  max-height: 135px;
+}