mautourco-components 0.2.27 → 0.2.29

package/dist/styles/components/organism/docket.css

@@ -2074,13 +2074,19 @@
   --mobile-global-spacing-section-gap-xl: 40px;
 }
 
+.docket__container {
+  width: -webkit-fit-content;
+  width: fit-content;
+}
+
 .docket {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   padding: 1.5rem;
   width: 384px;
-  min-height: 724px;
+  height: -webkit-fit-content;
+  height: fit-content;
   background: var(--color-elevation-level-1, #ffffff);
   border: var(--border-border, 1px) solid var(--color-border-subtle, #e5e5e5);
   border-radius: var(--border-radius-lg, 8px);

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

@@ -2107,7 +2107,7 @@
 .pax-selector__label {
   font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
   font-size: 14px;
-  line-height: 20px;
+  line-height: 1.5;
   color: var(--input-color-label-default, #262626);
 }
 
@@ -2131,6 +2131,17 @@
   border-color: var(--color-text-default, #262626);
 }
 
+.pax-selector--error .pax-selector__input {
+  border-color: var(--color-red-600, #dc2626);
+  background: var(--color-coral-red-50, #fff8f8);
+}
+
+.pax-selector--error .pax-selector__input-text,
+.pax-selector--error .pax-selector__input-icon,
+.pax-selector--error .pax-selector__chevron {
+  color: var(--color-coral-red-600, #f83b3b);
+}
+
 .pax-selector__input-content {
   display: flex;
   align-items: center;

package/dist/styles/components/organism/round-trip.css

@@ -2141,3 +2141,7 @@
     flex: 0 0 calc(50% - 6px);
   }
 }
+
+.round-trip__date-picker--input {
+  height: 2.75rem !important;
+}

package/dist/styles/components/organism/transfer-line.css

@@ -2127,7 +2127,7 @@
 }
 
 .transfer-line__field p {
-  line-height: 1.25rem;
+  line-height: 1.5;
 }
 
 /* Mobile layout - stack fields vertically */
@@ -2206,3 +2206,7 @@
 .transfer-line__delete-icon {
   color: var(--color-neutral-800);
 }
+
+.transfer-line__date-picker {
+  height: 2.75rem;
+}

package/package.json

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

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { IconBaseProps } from './registry';
+
+const BadgeAlertIcon: React.FC<IconBaseProps> = ({
+  size = 'md',
+  className = '',
+  color,
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs':
+        return 'w-3 h-3';
+      case 'sm':
+        return 'w-4 h-4';
+      case 'md':
+        return 'w-5 h-5';
+      case 'lg':
+        return 'w-6 h-6';
+      case 'xl':
+        return 'w-8 h-8';
+      default:
+        return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M20.9951 11.9999C20.9951 11.4964 20.8687 11.0011 20.627 10.5594C20.3851 10.1177 20.0356 9.74382 19.6113 9.47253C19.2569 9.24585 19.0826 8.82151 19.1748 8.41101C19.2858 7.91752 19.2696 7.40367 19.1289 6.91785C18.9881 6.43206 18.7267 5.98941 18.3691 5.63171C18.0114 5.27399 17.5689 5.01184 17.083 4.87097C16.5971 4.73014 16.0834 4.71511 15.5898 4.82605C15.1792 4.91837 14.7541 4.74315 14.5273 4.38855C14.2561 3.96443 13.883 3.61473 13.4414 3.37292C12.9997 3.13107 12.5036 3.00476 12 3.00476C11.4966 3.00479 11.0011 3.13121 10.5596 3.37292C10.1179 3.61477 9.74393 3.96431 9.47266 4.38855C9.24605 4.74296 8.82161 4.91808 8.41113 4.82605C7.91838 4.71561 7.40595 4.7315 6.9209 4.87195C6.43573 5.01246 5.99328 5.27297 5.63574 5.62976C5.27833 5.98651 5.01649 6.4282 4.875 6.91296C4.73362 7.39766 4.71677 7.9103 4.82617 8.4032C4.91754 8.81478 4.74102 9.23926 4.38477 9.46472C3.95737 9.73521 3.60534 10.1096 3.36133 10.5526C3.11732 10.9958 2.98927 11.494 2.98926 11.9999C2.98926 12.5058 3.1173 13.0039 3.36133 13.4471C3.60533 13.8902 3.95736 14.2645 4.38477 14.535C4.741 14.7605 4.9175 15.185 4.82617 15.5966C4.7167 16.0897 4.73347 16.6029 4.875 17.0878C5.0165 17.5724 5.27844 18.0133 5.63574 18.37C5.99328 18.7268 6.43573 18.9883 6.9209 19.1288C7.40583 19.2692 7.9185 19.2851 8.41113 19.1747L8.56543 19.1522C8.9255 19.1287 9.27556 19.3019 9.47363 19.6132C9.74456 20.0391 10.1191 20.3898 10.5615 20.6327C11.0039 20.8755 11.5003 21.0028 12.0049 21.0028C12.5097 21.0028 13.0068 20.8756 13.4492 20.6327C13.8916 20.3898 14.2652 20.039 14.5361 19.6132C14.7619 19.2582 15.186 19.0826 15.5967 19.1737C16.0898 19.2832 16.603 19.2664 17.0879 19.1249C17.5727 18.9833 18.0144 18.7216 18.3711 18.3641C18.7277 18.0067 18.9884 17.5649 19.1289 17.08C19.2694 16.5948 19.2853 16.0816 19.1748 15.5887C19.0828 15.1783 19.2569 14.7538 19.6113 14.5272C20.0356 14.2559 20.3851 13.882 20.627 13.4403C20.8687 12.9987 20.9951 12.5033 20.9951 11.9999ZM12.0098 14.9999C12.562 14.9999 13.0097 15.4476 13.0098 15.9999C13.0098 16.5522 12.5621 16.9999 12.0098 16.9999H12C11.4478 16.9998 11 16.5521 11 15.9999C11.0001 15.4477 11.4478 15 12 14.9999H12.0098ZM11 11.9999V7.99988C11.0001 7.4477 11.4478 6.99998 12 6.99988C12.5523 6.99988 12.9999 7.44764 13 7.99988V11.9999C13 12.5522 12.5523 12.9999 12 12.9999C11.4478 12.9998 11 12.5521 11 11.9999ZM22.9951 11.9999C22.9951 12.8392 22.784 13.6651 22.3809 14.4012C22.0854 14.9408 21.693 15.4182 21.2266 15.8134C21.2796 16.4247 21.2215 17.0425 21.0498 17.6356C20.8156 18.4442 20.3808 19.1813 19.7861 19.7772C19.1916 20.3729 18.4563 20.8089 17.6484 21.0448C17.0557 21.2178 16.4377 21.2771 15.8262 21.2255C15.4308 21.6943 14.952 22.0886 14.4111 22.3856C13.6738 22.7904 12.8461 23.0028 12.0049 23.0028C11.1637 23.0028 10.336 22.7905 9.59863 22.3856C9.0581 22.0888 8.57976 21.6949 8.18457 21.2264C7.57382 21.2791 6.95675 21.2213 6.36426 21.0497C5.55569 20.8155 4.81951 20.3806 4.22363 19.786C3.62782 19.1914 3.19098 18.4563 2.95508 17.6483C2.78217 17.0559 2.72194 16.4381 2.77344 15.827C2.30313 15.4318 1.90751 14.9525 1.60938 14.411C1.20278 13.6724 0.989258 12.843 0.989258 11.9999C0.989274 11.1567 1.20274 10.3274 1.60938 9.58875C1.90763 9.04703 2.30287 8.56704 2.77344 8.17175C2.72212 7.56114 2.78236 6.94431 2.95508 6.35242C3.19096 5.54429 3.62773 4.8084 4.22363 4.21375C4.81949 3.6192 5.55574 3.18423 6.36426 2.95007C6.95732 2.77833 7.57519 2.71939 8.18652 2.77234C8.5816 2.30622 9.05938 1.9143 9.59863 1.61902C10.3348 1.21596 11.1608 1.00479 12 1.00476C12.8393 1.00476 13.6652 1.21598 14.4014 1.61902C14.9406 1.91427 15.4184 2.30626 15.8135 2.77234C16.4261 2.71894 17.0453 2.7778 17.6396 2.95007C18.4495 3.18481 19.187 3.62049 19.7832 4.21667C20.3794 4.81285 20.815 5.55046 21.0498 6.36023C21.2221 6.9545 21.2799 7.57382 21.2266 8.1864C21.693 8.58158 22.0854 9.05901 22.3809 9.59851C22.7839 10.3347 22.9951 11.1606 22.9951 11.9999Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default BadgeAlertIcon;

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

@@ -5,6 +5,7 @@ import AirIcon from './AirIcon';
 import ArrivalIcon from './ArrivalIcon';
 import ArrowDownOutlineIcon from './ArrowDownOutlineIcon';
 import ArrowRightOutlineIcon from './ArrowRightOutlineIcon';
+import BadgeAlertIcon from './BadgeAlertIcon';
 import BikeIcon from './BikeIcon';
 import BookingIcon from './BookingIcon';
 import Building2OutlineIcon from './Building2OutlineIcon';
@@ -102,6 +103,7 @@ export const ICONS = {
   'plane-takeoff-outline': PlaneTakeoffOutlineIcon as unknown as IconComponent,
   'plane-landing-outline': PlaneLandingOutlineIcon as unknown as IconComponent,
   'building-2-outline': Building2OutlineIcon as unknown as IconComponent,
+  'badge-alert': BadgeAlertIcon as unknown as IconComponent,
   arrival: ArrivalIcon as unknown as IconComponent,
   departure: DepartureIcon as unknown as IconComponent,
   'map-pin': MapPinIcon as unknown as IconComponent,

package/src/components/molecules/AccomodationDocket/AccomodationDocket.tsx

@@ -1,15 +1,20 @@
 import { differenceInDays } from 'date-fns';
 import React from 'react';
+import '../../../styles/components/molecule/accomodation-docket.css';
 import { AccomodationDocket as AccomodationDocketType } from '../../../types/docket/services.types';
+import Button from '../../atoms/Button/Button';
 import Chip from '../../atoms/Chip/Chip';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 import { DateDisplay } from '../DateDisplay/DateDisplay';
 import TextWithIcon from '../TextWithIcon/TextWithIcon';
-import '../../../styles/components/molecule/accomodation-docket.css';
 
 export interface AccomodationDocketProps {
   data: AccomodationDocketType;
+  /** Remove mode - replaces price chip with remove button */
+  removeMode?: boolean;
+  /** Handler for remove button click */
+  onRemove?: () => void;
 }
 
 const clientTypeMap: Record<string, string> = {
@@ -19,7 +24,11 @@ const clientTypeMap: Record<string, string> = {
   vvip: 'VVIP',
 };
 
-export const AccomodationDocket: React.FC<AccomodationDocketProps> = ({ data }) => {
+export const AccomodationDocket: React.FC<AccomodationDocketProps> = ({
+  data,
+  removeMode = false,
+  onRemove,
+}) => {
   const { HotelName, TitleDescription, Total, Currency, Dates, Rooms } = data;
 
   const calculateNights = (dates: string[]): number => {
@@ -196,10 +205,21 @@ export const AccomodationDocket: React.FC<AccomodationDocketProps> = ({ data })
             Accommodation
           </Text>
         </div>
-        {Total && Currency && (
-          <Chip type="filled" color="accent" size="sm">
-            {Currency} {Total}
-          </Chip>
+        {removeMode ? (
+          <Button
+            variant="destructive"
+            size="sm"
+            leadingIcon="close"
+            onClick={onRemove}
+            className="accomodation-docket__remove-button">
+            Remove
+          </Button>
+        ) : (
+          Total && Currency && (
+            <Chip type="filled" color="accent" size="sm">
+              {Currency} {Total}
+            </Chip>
+          )
         )}
       </div>
 

package/src/components/molecules/Calendar/CalendarInput.tsx

@@ -101,9 +101,11 @@ const CalendarInput: React.FC<CalendarInputProps> = ({
     </button>
   );
 
+  const isEmpty = !localValue;
+
   return (
     <div
-      className={`calendar-input calendar-input--${displayState} calendar-input--icon-${iconPosition} ${className}`.trim()}
+      className={`calendar-input calendar-input--${displayState} calendar-input--icon-${iconPosition} ${isEmpty ? 'calendar-input--empty' : ''} ${className}`.trim()}
       data-node-id="3425:11289"
       onClick={onClick}>
       {iconPosition === 'left' && iconButton}
@@ -113,13 +115,14 @@ const CalendarInput: React.FC<CalendarInputProps> = ({
           type="text"
           className="calendar-input__field"
           placeholder={placeholder}
-          value={localValue || placeholder}
+          value={localValue}
           disabled={disabled}
           onChange={handleInputChange}
           onFocus={handleFocus}
           onBlur={handleBlur}
           readOnly={true}
           aria-label={'Select date'}
+          data-empty={!localValue}
         />
         {iconPosition === 'left' && showChevron && (
           <div

package/src/components/molecules/ExcursionDocket/ExcursionDocket.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import '../../../styles/components/molecule/excursion-docket.css';
 import { ExcursionDocket as ExcursionDocketType } from '../../../types/docket/services.types';
+import Button from '../../atoms/Button/Button';
 import Chip from '../../atoms/Chip/Chip';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
@@ -9,9 +10,17 @@ import TextWithIcon from '../TextWithIcon/TextWithIcon';
 
 export interface ExcursionDocketProps {
   data: ExcursionDocketType;
+  /** Remove mode - replaces price chip with remove button */
+  removeMode?: boolean;
+  /** Handler for remove button click */
+  onRemove?: () => void;
 }
 
-export const ExcursionDocket: React.FC<ExcursionDocketProps> = ({ data }) => {
+export const ExcursionDocket: React.FC<ExcursionDocketProps> = ({
+  data,
+  removeMode = false,
+  onRemove,
+}) => {
   const {
     ExcursionName,
     ServiceDate,
@@ -44,10 +53,21 @@ export const ExcursionDocket: React.FC<ExcursionDocketProps> = ({ data }) => {
             Excursion
           </Text>
         </div>
-        {TotalPrice && Currency && (
-          <Chip type="filled" color="accent" size="sm">
-            {formatPrice()}
-          </Chip>
+        {removeMode ? (
+          <Button
+            variant="destructive"
+            size="sm"
+            leadingIcon="close"
+            onClick={onRemove}
+            className="excursion-docket__remove-button">
+            Remove
+          </Button>
+        ) : (
+          TotalPrice && Currency && (
+            <Chip type="filled" color="accent" size="sm">
+              {formatPrice()}
+            </Chip>
+          )
         )}
       </div>
 

package/src/components/molecules/LocationDropdown/LocationDropdown.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import '../../../styles/components/molecule/location-dropdown.css';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
+import { scrollIntoViewOnOpen } from '../../../lib/utils';
 
 export interface LocationOption {
   id: string | number;
@@ -36,6 +37,8 @@ export interface LocationDropdownProps {
   maxHeight?: number;
   direction?: 'pickup' | 'dropoff';
   showGroupTitles?: boolean;
+  /** Whether to scroll to the input when the dropdown opens */
+  scrollOnOpen?: boolean;
 }
 
 const LocationDropdown: React.FC<LocationDropdownProps> = ({
@@ -53,9 +56,11 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   maxHeight = 240,
   direction = undefined,
   showGroupTitles = true,
+  scrollOnOpen = false,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLDivElement>(null);
 
   // Close dropdown when clicking outside
   useEffect(() => {
@@ -71,6 +76,11 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
     };
   }, []);
 
+  // Scroll to input when dropdown opens (if scrollOnOpen is true)
+  useEffect(() => {
+    scrollIntoViewOnOpen(inputRef, isOpen, scrollOnOpen);
+  }, [isOpen, scrollOnOpen]);
+
   const handleToggleDropdown = () => {
     if (!disabled) {
       setIsOpen(!isOpen);
@@ -189,6 +199,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
       )}
 
       <div
+        ref={inputRef}
         className={`location-dropdown__input location-dropdown__input--${getDropdownState()}`}
         onClick={handleToggleDropdown}>
         <div className="location-dropdown__input-content">

package/src/components/molecules/OtherServiceDocket/OtherServiceDocket.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import '../../../styles/components/molecule/other-service-docket.css';
 import { OtherServiceDocket as OtherServiceDocketType } from '../../../types/docket/services.types';
+import Button from '../../atoms/Button/Button';
 import Chip from '../../atoms/Chip/Chip';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
@@ -8,9 +9,17 @@ import TextWithIcon from '../TextWithIcon/TextWithIcon';
 
 export interface OtherServiceDocketProps {
   data: OtherServiceDocketType;
+  /** Remove mode - replaces price chip with remove button */
+  removeMode?: boolean;
+  /** Handler for remove button click */
+  onRemove?: () => void;
 }
 
-export const OtherServiceDocket: React.FC<OtherServiceDocketProps> = ({ data }) => {
+export const OtherServiceDocket: React.FC<OtherServiceDocketProps> = ({
+  data,
+  removeMode = false,
+  onRemove,
+}) => {
   const { service_for, Currency, TotalPrice, AdultCount } = data;
 
   const formatPrice = () => {
@@ -29,10 +38,21 @@ export const OtherServiceDocket: React.FC<OtherServiceDocketProps> = ({ data })
             Other services
           </Text>
         </div>
-        {TotalPrice && Currency && (
-          <Chip type="filled" color="accent" size="sm">
-            {formatPrice()}
-          </Chip>
+        {removeMode ? (
+          <Button
+            variant="destructive"
+            size="sm"
+            leadingIcon="close"
+            onClick={onRemove}
+            className="other-service-docket__remove-button">
+            Remove
+          </Button>
+        ) : (
+          TotalPrice && Currency && (
+            <Chip type="filled" color="accent" size="sm">
+              {formatPrice()}
+            </Chip>
+          )
         )}
       </div>
 

package/src/components/molecules/Toast/Toast.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import '../../../styles/components/molecule/toast.css';
+import Icon from '../../atoms/Icon/Icon';
+import { ICONS } from '../../atoms/Icon/icons/registry';
+import { Text } from '../../atoms/Typography/Typography';
+
+export type ToastType = 'informational' | 'success' | 'warning' | 'danger';
+
+export interface ToastProps {
+  /** Toast message text */
+  text: string;
+  /** Type of toast: informational, success, warning, or danger */
+  type?: ToastType;
+  /** Additional CSS classes */
+  className?: string;
+  /** Icon name */
+  iconName?: keyof typeof ICONS;
+}
+
+/**
+ * Toast component - A brief, auto-dismissing message that appears to notify the user.
+ *
+ * @example
+ * <Toast text="Please save your quotation" type="warning" />
+ *
+ * @param ToastProps
+ * @returns
+ */
+const Toast: React.FC<ToastProps> = ({ text, type = 'informational', className = '', iconName = 'badge-alert' }) => {
+  return (
+    <div className={`toast toast--${type} ${className}`.trim()}>
+      <div className="toast__container">
+        <div className="toast__icon-wrapper">
+          <Icon name={iconName} size="md" className="toast__icon" />
+        </div>
+        <Text
+          size="sm"
+          variant="bold"
+          leading="5"
+          className="toast__text">
+          {text}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export default Toast;
+

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

@@ -0,0 +1,3 @@
+export { default } from './Toast';
+export type { ToastProps, ToastType } from './Toast';
+

package/src/components/molecules/TransferDocket/TransferDocket.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TransferDocket as TransferDocketType } from '../../../types/docket/services.types';
+import Button from '../../atoms/Button/Button';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 import { DateDisplay } from '../DateDisplay/DateDisplay';
@@ -9,9 +10,17 @@ import '../../../styles/components/molecule/transfer-docket.css';
 
 export interface TransferDocketProps {
   data: TransferDocketType;
+  /** Remove mode - replaces price display with remove button */
+  removeMode?: boolean;
+  /** Handler for remove button click */
+  onRemove?: () => void;
 }
 
-export const TransferDocket: React.FC<TransferDocketProps> = ({ data }) => {
+export const TransferDocket: React.FC<TransferDocketProps> = ({
+  data,
+  removeMode = false,
+  onRemove,
+}) => {
   const {
     TransferDate,
     Currency,
@@ -97,8 +106,17 @@ export const TransferDocket: React.FC<TransferDocketProps> = ({ data }) => {
             Transfer
           </Text>
         </div>
-        {TotalPrice && Currency && (
-          <PriceDisplay currency={Currency} price={TotalPrice} />
+        {removeMode ? (
+          <Button
+            variant="destructive"
+            size="sm"
+            leadingIcon="close"
+            onClick={onRemove}
+            className="transfer-docket__remove-button">
+            Remove
+          </Button>
+        ) : (
+          TotalPrice && Currency && <PriceDisplay currency={Currency} price={TotalPrice} />
         )}
       </div>
 

package/src/components/organisms/CarBookingCard/CarBookingCard.css

@@ -17,7 +17,7 @@
 }
 
 .car-booking-card--hover,
-.car-booking-card:hover {
+.car-booking-card:hover:not(.car-booking-card--readonly) {
   /* Will be fine-tuned when we inspect Figma Hover variant */
   box-shadow:
     var(--spacing-base-0, 0px) var(--spacing-base-1, 4px)
@@ -28,6 +28,18 @@
       rgba(48, 54, 66, 0.18);
 }
 
+/* Readonly mode styles */
+.car-booking-card--readonly .car-booking-card__supplement-value {
+  margin: 0;
+  padding: var(--spacing-padding-py-3, 12px) var(--spacing-padding-px-4, 16px);
+  border-radius: var(--border-radius-rounded-xl, 12px);
+  background: var(--color-elevation-level-1, #ffffff);
+  border: var(--input-border-width-default, 1px) solid var(--color-border-subtle, #e5e5e5);
+  min-height: 44px; /* Match input field height */
+  display: flex;
+  align-items: center;
+}
+
 /* NOTE: Figma Selected keeps the same white surface; selection is expressed via CTA + active divider */
 
 .car-booking-card__image-wrap {

package/src/components/organisms/CarBookingCard/CarBookingCard.tsx

@@ -58,6 +58,9 @@ export interface CarBookingCardProps {
   ctaButtonProps?: Omit<ButtonProps, 'children'>;
   onCtaClick?: ButtonProps['onClick'];
 
+  /** Readonly mode - disables interactions and shows values as text */
+  readonly?: boolean;
+
   className?: string;
 }
 
@@ -84,6 +87,7 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
   ctaLabel,
   ctaButtonProps,
   onCtaClick,
+  readonly = false,
   className = '',
 }) => {
   const resolvedShowSupplement =
@@ -97,6 +101,7 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
     `${baseClass}--${size}`,
     `${baseClass}--${state}`,
     `${baseClass}--${type}`,
+    readonly ? `${baseClass}--readonly` : '',
     className,
   ]
     .filter(Boolean)
@@ -111,7 +116,7 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
       <div className="car-booking-card__active-divider" />
 
       <div className="car-booking-card__body">
-        {priceRows.length > 0 && (
+        {priceRows.length > 0 && !readonly && (
           <section className="car-booking-card__section car-booking-card__section--price">
             <Divider variant="dashed" className="car-booking-card__dashed-divider" />
             <div className="car-booking-card__price-content">
@@ -160,7 +165,7 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
             ))}
           </div>
 
-          {infoText && (
+          {infoText && !readonly && (
             <div className="car-booking-card__info">
               <span className="car-booking-card__info-icon" aria-hidden="true">
                 i
@@ -172,7 +177,7 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
           )}
         </section>
 
-        {resolvedShowSupplement && (
+        {resolvedShowSupplement && !readonly && (
           <section className="car-booking-card__section car-booking-card__section--supplement">
             <Divider variant="dashed" className="car-booking-card__dashed-divider" />
             <div className="car-booking-card__supplement-header">
@@ -198,17 +203,29 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
                 </Text>
               )}
             </div>
-            <DropdownInput
-              placeholder={supplementPlaceholder}
-              value={supplementValue}
-              state={resolvedSupplementState}
-              options={supplementOptions}
-              onSelect={onSupplementSelect}
-            />
+            {readonly ? (
+              <Text
+                size="sm"
+                leading="5"
+                variant="regular"
+                color={supplementValue ? "default" : "subtle"}
+                className="car-booking-card__supplement-value"
+              >
+                {supplementValue || supplementPlaceholder}
+              </Text>
+            ) : (
+              <DropdownInput
+                placeholder={supplementPlaceholder}
+                value={supplementValue}
+                state={resolvedSupplementState}
+                options={supplementOptions}
+                onSelect={onSupplementSelect}
+              />
+            )}
           </section>
         )}
 
-        <footer className="car-booking-card__footer">
+        {!readonly && <footer className="car-booking-card__footer">
           <div className="car-booking-card__total">
             <Text size="sm" variant="bold" color="accent" className="car-booking-card__total-price">
               {totalPrice}
@@ -218,16 +235,18 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
             </Text>
           </div>
 
-          <Button
-            variant="primary"
-            size="sm"
-            {...ctaButtonProps}
-            onClick={onCtaClick}
-            className={`car-booking-card__cta ${ctaButtonProps?.className ?? ''}`.trim()}
-          >
-            {ctaLabel}
-          </Button>
-        </footer>
+          {!readonly && (
+            <Button
+              variant="primary"
+              size="sm"
+              {...ctaButtonProps}
+              onClick={onCtaClick}
+              className={`car-booking-card__cta ${ctaButtonProps?.className ?? ''}`.trim()}
+            >
+              {ctaLabel}
+            </Button>
+          )}
+        </footer>}
       </div>
     </article>
   );