mautourco-components 0.2.9 → 0.2.11

package/dist/components/organisms/CarBookingCard/CarBookingCard.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ButtonProps } from '../../atoms/Button/Button';
+import { FeatureRowProps } from '../../molecules/FeatureRow/FeatureRow';
+import './CarBookingCard.css';
+export type CarBookingCardSize = 'small' | 'large';
+export type CarBookingCardState = 'default' | 'selected' | 'hover';
+export type CarBookingCardType = 'default' | 'no-of-pax' | 'no-of-vehicle';
+export type CarBookingCardPriceRow = {
+    label: string;
+    value: string;
+};
+export interface CarBookingCardProps {
+    /** Vehicle image url */
+    imageSrc: string;
+    /** Card title */
+    title: string;
+    /** Size variant */
+    size?: CarBookingCardSize;
+    /** Visual state (for Storybook parity with Figma variants) */
+    state?: CarBookingCardState;
+    /** Variant used in Figma: affects which breakdown row is shown (optional) */
+    type?: CarBookingCardType;
+    /** Feature rows displayed under the title */
+    features: FeatureRowProps[];
+    /** Optional info note below features */
+    infoText?: string;
+    /** Price breakdown section */
+    priceTitle?: string;
+    priceRows?: CarBookingCardPriceRow[];
+    /** Supplement dropdown section */
+    /** Whether to render the supplement section (matches Figma variants Supplement=Yes/No/-) */
+    showSupplement?: boolean;
+    /** Optional message shown in red next to the "Supplement" label (Figma: "Supplement is not available for this vehicle.") */
+    supplementMessage?: string;
+    supplementLabel?: string;
+    supplementPlaceholder?: string;
+    supplementValue?: string;
+    supplementState?: 'default' | 'loading' | 'selected' | 'error' | 'disabled';
+    supplementOptions?: string[];
+    onSupplementSelect?: (option: string) => void;
+    /** Footer price */
+    totalPrice: string;
+    totalPriceLabel?: string;
+    /** Footer CTA */
+    ctaLabel: string;
+    ctaButtonProps?: Omit<ButtonProps, 'children'>;
+    onCtaClick?: ButtonProps['onClick'];
+    className?: string;
+}
+declare const CarBookingCard: React.FC<CarBookingCardProps>;
+export default CarBookingCard;

package/dist/components/organisms/CarBookingCard/CarBookingCard.js

@@ -0,0 +1,39 @@
+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 Button from '../../atoms/Button/Button';
+import Divider from '../../atoms/Divider/Divider';
+import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
+import { Heading, Text } from '../../atoms/Typography/Typography';
+import FeatureRow from '../../molecules/FeatureRow/FeatureRow';
+import './CarBookingCard.css';
+var CarBookingCard = function (_a) {
+    var _b;
+    var imageSrc = _a.imageSrc, title = _a.title, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.state, state = _d === void 0 ? 'default' : _d, _e = _a.type, type = _e === void 0 ? 'default' : _e, features = _a.features, infoText = _a.infoText, _f = _a.priceTitle, priceTitle = _f === void 0 ? 'Price breakdown' : _f, _g = _a.priceRows, priceRows = _g === void 0 ? [] : _g, showSupplement = _a.showSupplement, supplementMessage = _a.supplementMessage, _h = _a.supplementLabel, supplementLabel = _h === void 0 ? 'Supplement' : _h, _j = _a.supplementPlaceholder, supplementPlaceholder = _j === void 0 ? 'Select a supplement' : _j, supplementValue = _a.supplementValue, _k = _a.supplementState, supplementState = _k === void 0 ? 'default' : _k, _l = _a.supplementOptions, supplementOptions = _l === void 0 ? [] : _l, onSupplementSelect = _a.onSupplementSelect, totalPrice = _a.totalPrice, _m = _a.totalPriceLabel, totalPriceLabel = _m === void 0 ? 'Total price' : _m, ctaLabel = _a.ctaLabel, ctaButtonProps = _a.ctaButtonProps, onCtaClick = _a.onCtaClick, _o = _a.className, className = _o === void 0 ? '' : _o;
+    var resolvedShowSupplement = showSupplement !== null && showSupplement !== void 0 ? showSupplement : Boolean(supplementLabel || supplementPlaceholder || supplementOptions.length > 0);
+    var resolvedSupplementState = supplementMessage ? 'disabled' : supplementState;
+    var baseClass = 'car-booking-card';
+    var classes = [
+        baseClass,
+        "".concat(baseClass, "--").concat(size),
+        "".concat(baseClass, "--").concat(state),
+        "".concat(baseClass, "--").concat(type),
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("article", __assign({ className: classes }, { children: [_jsx("div", __assign({ className: "car-booking-card__image-wrap" }, { children: _jsx("img", { className: "car-booking-card__image", src: imageSrc, alt: "" }) })), _jsx("div", { className: "car-booking-card__active-divider" }), _jsxs("div", __assign({ className: "car-booking-card__body" }, { children: [priceRows.length > 0 && (_jsxs("section", __assign({ className: "car-booking-card__section car-booking-card__section--price" }, { children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", __assign({ className: "car-booking-card__price-content" }, { children: [_jsx(Text, __assign({ as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title" }, { children: priceTitle })), _jsx("div", __assign({ className: "car-booking-card__price-rows" }, { children: priceRows.map(function (row, idx) { return (_jsxs("div", __assign({ className: "car-booking-card__price-row" }, { children: [_jsx(Text, __assign({ size: "sm", leading: "5", variant: "regular", color: "subtle", className: "car-booking-card__price-label" }, { children: row.label })), _jsx(Text, __assign({ size: "sm", leading: "5", variant: "bold", color: "subtle", className: "car-booking-card__price-value" }, { children: row.value }))] }), "".concat(row.label, "-").concat(idx))); }) }))] })), _jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" })] }))), _jsxs("section", __assign({ className: "car-booking-card__section car-booking-card__section--content" }, { children: [_jsxs("div", __assign({ className: "car-booking-card__title" }, { children: [_jsx("span", { className: "car-booking-card__title-marker", "aria-hidden": "true" }), _jsx(Heading, __assign({ level: 4, variant: "bold", color: "accent", className: "car-booking-card__title-text" }, { children: title }))] })), _jsx("div", __assign({ className: "car-booking-card__features" }, { children: features.map(function (feature, idx) {
+                                    var _a;
+                                    return (_jsx(FeatureRow, __assign({}, feature, { className: "car-booking-card__feature-row ".concat((_a = feature.className) !== null && _a !== void 0 ? _a : '').trim() }), "".concat(feature.label, "-").concat(idx)));
+                                }) })), infoText && (_jsxs("div", __assign({ className: "car-booking-card__info" }, { children: [_jsx("span", __assign({ className: "car-booking-card__info-icon", "aria-hidden": "true" }, { children: "i" })), _jsx(Text, __assign({ size: "sm", leading: "5", variant: "regular", color: "default", className: "car-booking-card__info-text" }, { children: infoText }))] })))] })), resolvedShowSupplement && (_jsxs("section", __assign({ className: "car-booking-card__section car-booking-card__section--supplement" }, { children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", __assign({ className: "car-booking-card__supplement-header" }, { children: [_jsx(Text, __assign({ as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title" }, { children: supplementLabel })), supplementMessage && (_jsx(Text, __assign({ as: "p", size: "sm", leading: "5", variant: "regular", className: "car-booking-card__supplement-message" }, { children: supplementMessage })))] })), _jsx(DropdownInput, { placeholder: supplementPlaceholder, value: supplementValue, state: resolvedSupplementState, options: supplementOptions, onSelect: onSupplementSelect })] }))), _jsxs("footer", __assign({ className: "car-booking-card__footer" }, { children: [_jsxs("div", __assign({ className: "car-booking-card__total" }, { children: [_jsx(Text, __assign({ size: "sm", variant: "bold", color: "accent", className: "car-booking-card__total-price" }, { children: totalPrice })), _jsx(Text, __assign({ size: "sm", variant: "regular", color: "subtle", className: "car-booking-card__total-label" }, { children: totalPriceLabel }))] })), _jsx(Button, __assign({ variant: "primary", size: "sm" }, ctaButtonProps, { onClick: onCtaClick, className: "car-booking-card__cta ".concat((_b = ctaButtonProps === null || ctaButtonProps === void 0 ? void 0 : ctaButtonProps.className) !== null && _b !== void 0 ? _b : '').trim() }, { children: ctaLabel }))] }))] }))] })));
+};
+export default CarBookingCard;

package/dist/components/organisms/CarBookingCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CarBookingCard';
+export type { CarBookingCardProps, CarBookingCardPriceRow, CarBookingCardSize, CarBookingCardState, CarBookingCardType, } from './CarBookingCard';

package/dist/components/organisms/CarBookingCard/index.js

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

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { default as Button } from './components/atoms/Button/Button';
 export { default as Checkbox } from './components/atoms/Checkbox/Checkbox';
+export { default as Chip } from './components/atoms/Chip/Chip';
+export { default as Divider } from './components/atoms/Divider/Divider';
 export { default as Icon } from './components/atoms/Icon/Icon';
 export { default as DropdownInput } from './components/atoms/Inputs/DropdownInput/DropdownInput';
 export { default as Input } from './components/atoms/Inputs/Input/Input';
@@ -17,6 +19,10 @@ export { default as TimePicker } from './components/molecules/Calendar/TimePicke
 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 { default as Pagination } from './components/molecules/Pagination/Pagination';
+export { default as Stepper } from './components/molecules/Stepper/Stepper';
+export { default as FeatureRow } from './components/molecules/FeatureRow/FeatureRow';
+export { default as SectionTitle } from './components/molecules/SectionTitle/SectionTitle';
 export { TopNavigation } from './components/organisms/TopNavigation/TopNavigation';
 export { Footer } from './components/organisms/Footer/Footer';
 export { Dialog } from './components/organisms/Dialog/Dialog';
@@ -27,6 +33,7 @@ export { default as DateTimePicker } from './components/organisms/DateTimePicker
 export { default as RoundTrip } from './components/organisms/RoundTrip/RoundTrip';
 export { default as TransferLine } from './components/organisms/TransferLine/TransferLine';
 export { default as SearchBarTransfer } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
+export { default as CarBookingCard } from './components/organisms/CarBookingCard/CarBookingCard';
 export { default as ButtonSpinner } from './components/atoms/Spinner/variants/ButtonSpinner';
 export { default as LoadingSpinner } from './components/atoms/Spinner/variants/LoadingSpinner';
 export { default as CheckIcon } from './components/atoms/Icon/icons/Check';
@@ -49,3 +56,8 @@ export type { DateTimePickerProps } from './components/organisms/DateTimePicker/
 export type { RoundTripProps, RoundTripData, RoundTripTransfer } from './components/organisms/RoundTrip/RoundTrip';
 export type { TransferLineProps, TransferLineData, TransferType } from './components/organisms/TransferLine/TransferLine';
 export type { SearchBarTransferProps, SearchBarTransferData, TransferMode } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
+export type { CarBookingCardProps, CarBookingCardPriceRow, CarBookingCardSize, CarBookingCardState, CarBookingCardType, } from './components/organisms/CarBookingCard/CarBookingCard';
+export type { DividerProps } from './components/atoms/Divider/Divider';
+export type { StepperProps } from './components/molecules/Stepper/Stepper';
+export type { FeatureRowProps } from './components/molecules/FeatureRow/FeatureRow';
+export type { SectionTitleProps } from './components/molecules/SectionTitle/SectionTitle';

package/dist/index.js

@@ -1,6 +1,8 @@
 // Atoms - Base components
 export { default as Button } from './components/atoms/Button/Button';
 export { default as Checkbox } from './components/atoms/Checkbox/Checkbox';
+export { default as Chip } from './components/atoms/Chip/Chip';
+export { default as Divider } from './components/atoms/Divider/Divider';
 export { default as Icon } from './components/atoms/Icon/Icon';
 export { default as DropdownInput } from './components/atoms/Inputs/DropdownInput/DropdownInput';
 export { default as Input } from './components/atoms/Inputs/Input/Input';
@@ -19,6 +21,10 @@ export { default as TimePicker } from './components/molecules/Calendar/TimePicke
 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 { default as Pagination } from './components/molecules/Pagination/Pagination';
+export { default as Stepper } from './components/molecules/Stepper/Stepper';
+export { default as FeatureRow } from './components/molecules/FeatureRow/FeatureRow';
+export { default as SectionTitle } from './components/molecules/SectionTitle/SectionTitle';
 // Organisms - Complex components
 export { TopNavigation } from './components/organisms/TopNavigation/TopNavigation';
 export { Footer } from './components/organisms/Footer/Footer';
@@ -30,6 +36,7 @@ export { default as DateTimePicker } from './components/organisms/DateTimePicker
 export { default as RoundTrip } from './components/organisms/RoundTrip/RoundTrip';
 export { default as TransferLine } from './components/organisms/TransferLine/TransferLine';
 export { default as SearchBarTransfer } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
+export { default as CarBookingCard } from './components/organisms/CarBookingCard/CarBookingCard';
 // Spinner Variants
 export { default as ButtonSpinner } from './components/atoms/Spinner/variants/ButtonSpinner';
 export { default as LoadingSpinner } from './components/atoms/Spinner/variants/LoadingSpinner';

package/dist/styles/components/molecule/location-dropdown.css

@@ -2362,6 +2362,44 @@
   color: var(--color-atoll-green-800);
 }
 
+/* Skeleton Loading States */
+
+.location-dropdown__option--skeleton {
+  pointer-events: none;
+  cursor: default;
+}
+
+.location-dropdown__option--skeleton:hover {
+  background-color: #ffffff00;
+}
+
+.location-dropdown__skeleton-icon {
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  border-radius: 0.25rem;
+  background-color: var(--color-neutral-200);
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.location-dropdown__skeleton-text {
+  height: 1rem;
+  flex: 1 1 0%;
+  border-radius: 0.25rem;
+  background-color: var(--color-neutral-200);
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+  animation-delay: 0.15s;
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
 /* Type-specific adjustments */
 
 .location-dropdown--airport-port .location-dropdown__content {

package/package.json

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

package/src/components/atoms/Button/Button.css

@@ -37,6 +37,11 @@
   line-height: calc(var(--font-leading-leading-sm, 20)* 1rem);
 }
 
+.button--sm.button--with-icon {
+  /* Figma button/md gap is 10px even when used with 14px text + icon */
+  gap: var(--component-button-spacing-md-gap, 10px);
+}
+
 .button--md {
   padding: var(--component-button-spacing-md-padding-y, 10rem)
     var(--component-button-spacing-md-padding-x, 14rem);
@@ -106,6 +111,29 @@
   color: var(--color-button-brand-foreground-secondary-default, #ffffff);
 }
 
+.button--destructive {
+  background-color: var(--color-button-destructive-background-default, #dc2626);
+  color: var(--color-button-destructive-foreground-default, #ffffff);
+}
+
+.button--destructive:hover:not(:disabled) {
+  background-color: var(--color-button-destructive-background-hover, #991b1b);
+}
+
+.button--destructive:active:not(:disabled) {
+  background-color: var(--color-button-destructive-background-pressed, #450a0a);
+}
+
+.button--destructive:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 2rem var(--color-button-destructive-background-hover, #991b1b);
+}
+
+.button--destructive:disabled {
+  background-color: var(--color-button-destructive-background-disabled, #f5f5f5);
+  color: var(--color-button-destructive-foreground-disabled, #a3a3a3);
+}
+
 .button--outline-primary {
   background-color: var(--component-button-color-outline-primary-background-default, #ffffff);
   color: var(--component-button-color-outline-primary-foreground-default, #fe8839);

package/src/components/atoms/Button/Button.tsx

@@ -4,7 +4,7 @@ import './Button.css';
 
 export interface ButtonProps {
   /** Variant du bouton */
-  variant?: 'primary' | 'secondary' | 'outline' | 'outline-primary' | 'outline-secondary';
+  variant?: 'primary' | 'secondary' | 'outline' | 'outline-primary' | 'outline-secondary' | 'destructive';
   /** Taille du bouton */
   size?: 'sm' | 'md' | 'lg' | 'xl';
   /** Contenu du bouton */
@@ -56,11 +56,12 @@ const Button: React.FC<ButtonProps> = ({
 
   const hasLeadingIcon = Boolean(leadingIcon);
   const hasTrailingIcon = Boolean(trailingIcon);
+  const withIconClass = hasLeadingIcon || hasTrailingIcon ? 'button--with-icon' : '';
 
   return (
     <button
       type={type}
-      className={buttonClasses}
+      className={[buttonClasses, withIconClass].filter(Boolean).join(' ')}
       disabled={disabled}
       onClick={onClick}
     >

package/src/components/atoms/Chip/Chip.css

@@ -0,0 +1,161 @@
+.chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--chip-spacing-sm-gap, 4px);
+  border-radius: var(--chip-border-radius-pill, 9999px);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-weight: var(--font-weight-font-medium, 500);
+  line-height: calc(var(--font-leading-leading-base, 16) * 1px);
+  white-space: nowrap;
+  border: var(--chip-border-width-default, 1px) solid transparent;
+}
+
+/* Sizes */
+.chip--sm {
+  padding: var(--chip-spacing-sm-padding-y, 4px) var(--chip-spacing-sm-padding-x, 8px);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
+  gap: var(--chip-spacing-sm-gap, 4px);
+}
+
+.chip--md {
+  padding: var(--chip-spacing-md-padding-y, 4px) var(--chip-spacing-md-padding-x, 12px);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
+  gap: var(--chip-spacing-md-gap, 4px);
+}
+
+.chip--lg {
+  padding: var(--chip-spacing-lg-padding-y, 4px) var(--chip-spacing-lg-padding-x, 16px);
+  font-size: var(--font-size-text-base, 16px);
+  line-height: calc(var(--font-leading-leading-base, 16) * 1px);
+  gap: var(--chip-spacing-lg-gap, 4px);
+}
+
+/* Types - Filled */
+.chip--filled.chip--brand {
+  background-color: var(--chip-color-brand-filled-background, #ed4c09);
+  color: var(--chip-color-brand-filled-foreground, #ffffff);
+  border-color: transparent;
+}
+
+.chip--filled.chip--accent {
+  background-color: var(--chip-color-accent-filled-background, #0f7173);
+  color: var(--chip-color-accent-filled-foreground, #ffffff);
+  border-color: transparent;
+}
+
+.chip--filled.chip--blue {
+  background-color: var(--chip-color-blue-filled-background, #2e4780);
+  color: var(--chip-color-blue-filled-foreground, #ffffff);
+  border-color: transparent;
+}
+
+.chip--filled.chip--green {
+  background-color: var(--chip-color-green-filled-background, #dde8db);
+  color: var(--chip-color-green-filled-foreground, #384733);
+  border-color: transparent;
+}
+
+.chip--filled.chip--yellow {
+  background-color: var(--chip-color-yellow-filled-background, #eab308);
+  color: var(--chip-color-yellow-filled-foreground, #ffffff);
+  border-color: transparent;
+}
+
+.chip--filled.chip--red {
+  background-color: var(--chip-color-red-filled-background, #991b1b);
+  color: var(--chip-color-red-filled-foreground, #ffffff);
+  border-color: transparent;
+}
+
+.chip--filled.chip--neutral {
+  background-color: var(--chip-color-neutral-filled-background, #e5e7eb);
+  color: var(--chip-color-neutral-filled-foreground, #262626);
+  border-color: transparent;
+}
+
+/* Types - Outline */
+.chip--outline.chip--brand {
+  background-color: var(--chip-color-brand-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-brand-outline-foreground, #ed4c09);
+  border-color: var(--chip-color-brand-outline-foreground, #ed4c09);
+}
+
+.chip--outline.chip--accent {
+  background-color: var(--chip-color-accent-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-accent-outline-foreground, #0f7173);
+  border-color: var(--chip-color-accent-outline-foreground, #0f7173);
+}
+
+.chip--outline.chip--blue {
+  background-color: var(--chip-color-blue-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-blue-outline-foreground, #2e4780);
+  border-color: var(--chip-color-blue-outline-foreground, #2e4780);
+}
+
+.chip--outline.chip--green {
+  background-color: var(--chip-color-green-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-green-outline-foreground, #4a6045);
+  border-color: var(--chip-color-green-outline-foreground, #4a6045);
+}
+
+.chip--outline.chip--yellow {
+  background-color: var(--chip-color-yellow-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-yellow-outline-foreground, #eab308);
+  border-color: var(--chip-color-yellow-outline-foreground, #eab308);
+}
+
+.chip--outline.chip--red {
+  background-color: var(--chip-color-red-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-red-outline-foreground, #991b1b);
+  border-color: var(--chip-color-red-outline-foreground, #991b1b);
+}
+
+.chip--outline.chip--neutral {
+  background-color: var(--chip-color-neutral-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-neutral-outline-text, #262626);
+  border-color: var(--chip-color-neutral-outline-foreground, #9ca3af);
+}
+
+/* Icon styles */
+.chip__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.chip__icon--leading {
+  margin-right: 0;
+}
+
+.chip__icon--trailing {
+  margin-left: 0;
+}
+
+/* Label */
+.chip__label {
+  display: inline-block;
+}
+
+/* Clickable state */
+.chip--clickable {
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.chip--clickable:hover {
+  opacity: 0.8;
+}
+
+.chip--clickable:active {
+  opacity: 0.6;
+}
+
+.chip--clickable:focus {
+  outline: 2px solid var(--chip-color-brand-outline-foreground, #ed4c09);
+  outline-offset: 2px;
+}
+

package/src/components/atoms/Chip/Chip.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import Icon, { IconName } from '../Icon/Icon';
+import './Chip.css';
+
+export interface ChipProps {
+  /** Label du chip */
+  label?: string;
+  /** Contenu du chip (alternative à label) */
+  children?: React.ReactNode;
+  /** Taille du chip */
+  size?: 'sm' | 'md' | 'lg';
+  /** Type de chip */
+  type?: 'filled' | 'outline';
+  /** Couleur du chip */
+  color?: 'brand' | 'accent' | 'blue' | 'green' | 'yellow' | 'red' | 'neutral';
+  /** Icône affichée avant le label */
+  leadingIcon?: IconName;
+  /** Icône affichée après le label */
+  trailingIcon?: IconName;
+  /** Taille des icônes */
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Classes CSS supplémentaires */
+  className?: string;
+  /** Handler de clic (optionnel, rend le chip cliquable) */
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+const Chip: React.FC<ChipProps> = ({
+  label,
+  children,
+  size = 'sm',
+  type = 'filled',
+  color = 'brand',
+  leadingIcon,
+  trailingIcon,
+  iconSize = 'sm',
+  className = '',
+  onClick,
+}) => {
+  const baseClasses = 'chip';
+  const sizeClass = `chip--${size}`;
+  const typeClass = `chip--${type}`;
+  const colorClass = `chip--${color}`;
+  const clickableClass = onClick ? 'chip--clickable' : '';
+
+  const chipClasses = [
+    baseClasses,
+    sizeClass,
+    typeClass,
+    colorClass,
+    clickableClass,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const hasLeadingIcon = Boolean(leadingIcon);
+  const hasTrailingIcon = Boolean(trailingIcon);
+  const content = label || children;
+
+  return (
+    <div className={chipClasses} onClick={onClick} role={onClick ? 'button' : undefined} tabIndex={onClick ? 0 : undefined}>
+      {hasLeadingIcon && (
+        <span className="chip__icon chip__icon--leading">
+          <Icon name={leadingIcon!} size={iconSize} />
+        </span>
+      )}
+      <span className="chip__label">{content}</span>
+      {hasTrailingIcon && (
+        <span className="chip__icon chip__icon--trailing">
+          <Icon name={trailingIcon!} size={iconSize} />
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Chip;
+

package/src/components/atoms/Divider/Divider.css

@@ -0,0 +1,58 @@
+.divider {
+  flex-shrink: 0;
+  background-color: var(--divider-color-default, #d9d9d9);
+  border: none;
+}
+
+/* Horizontal divider */
+.divider--horizontal {
+  width: 100%;
+  height: var(--divider-border-width-default, 1px);
+}
+
+/* Vertical divider */
+.divider--vertical {
+  width: var(--divider-border-width-default, 1px);
+  height: 100%;
+}
+
+/* Dashed variant (Figma divider) */
+.divider--dashed {
+  background-color: transparent;
+}
+
+.divider--dashed.divider--horizontal {
+  height: var(--divider-dash-thickness, var(--divider-border-width-default, 1px));
+  border: none;
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--divider-dash-color, var(--card-color-border-default, #a3a3a3)) 0,
+    var(--divider-dash-color, var(--card-color-border-default, #a3a3a3)) var(--divider-dash-length, 10px),
+    transparent var(--divider-dash-length, 10px),
+    transparent calc(var(--divider-dash-length, 10px) + var(--divider-dash-gap, 6px))
+  );
+}
+
+.divider--dashed.divider--vertical {
+  width: var(--divider-dash-thickness, var(--divider-border-width-default, 1px));
+  border: none;
+  background-image: repeating-linear-gradient(
+    to bottom,
+    var(--divider-dash-color, var(--card-color-border-default, #a3a3a3)) 0,
+    var(--divider-dash-color, var(--card-color-border-default, #a3a3a3)) var(--divider-dash-length, 10px),
+    transparent var(--divider-dash-length, 10px),
+    transparent calc(var(--divider-dash-length, 10px) + var(--divider-dash-gap, 6px))
+  );
+}
+
+/* Color bar variant (used in Car Booking Card) */
+.divider--color-bar {
+  height: var(--dimension-height-h-1, 4px);
+  background-color: var(--color-border-active-default, #0f7173);
+}
+
+.divider--color-bar.divider--vertical {
+  width: var(--dimension-width-w-1, 4px);
+  height: 100%;
+}
+

package/src/components/atoms/Divider/Divider.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import './Divider.css';
+
+export interface DividerProps {
+  /** Orientation of the divider */
+  orientation?: 'horizontal' | 'vertical';
+  /** Variant of the divider */
+  variant?: 'default' | 'color-bar' | 'dashed';
+  /** Custom color (overrides default color) */
+  color?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const Divider: React.FC<DividerProps> = ({
+  orientation = 'horizontal',
+  variant = 'default',
+  color,
+  className = '',
+}) => {
+  const baseClass = 'divider';
+  const orientationClass = `divider--${orientation}`;
+  const variantClass = variant !== 'default' ? `divider--${variant}` : '';
+  const classes = [baseClass, orientationClass, variantClass, className]
+    .filter(Boolean)
+    .join(' ');
+
+  const style: React.CSSProperties = color
+    ? { backgroundColor: color, borderColor: color }
+    : {};
+
+  return <div className={classes} style={style} role="separator" aria-orientation={orientation} />;
+};
+
+export default Divider;
+