mautourco-components 0.2.8 → 0.2.10

package/dist/styles/components/typography.css

@@ -2072,6 +2072,7 @@
   --mobile-global-spacing-section-gap-md: 24px;
   --mobile-global-spacing-section-gap-lg: 32px;
   --mobile-global-spacing-section-gap-xl: 40px;
+  --color-text-yellow: var(--color-yellow-600);
 }
 
 .heading-3xl {

package/dist/types/table/action-dropdown-type.types.d.ts

@@ -0,0 +1,5 @@
+export declare enum ActionDropdownType {
+    ADD_ITEM = "add_item",
+    SEND_VIA_MAIL = "send_via_mail",
+    DELETE_QUOTE = "delete_quote"
+}

package/dist/types/table/action-dropdown-type.types.js

@@ -0,0 +1,6 @@
+export var ActionDropdownType;
+(function (ActionDropdownType) {
+    ActionDropdownType["ADD_ITEM"] = "add_item";
+    ActionDropdownType["SEND_VIA_MAIL"] = "send_via_mail";
+    ActionDropdownType["DELETE_QUOTE"] = "delete_quote";
+})(ActionDropdownType || (ActionDropdownType = {}));

package/dist/types/table/booking.types.d.ts

@@ -0,0 +1,16 @@
+import { TableRowData } from '../../components/organisms/Table/Table';
+export interface BookingListItem extends TableRowData<BookingListItem> {
+    agency_name: string;
+    created_by: string;
+    created_date: string;
+    status: string;
+    file_name: string;
+    booking_id: number;
+    date: string[];
+    pax_details: {
+        adult: number;
+        teen: number;
+        child: number;
+        infant: number;
+    };
+}

package/dist/types/table/booking.types.js

@@ -0,0 +1 @@
+export {};

package/dist/types/table/detail-resume.types.d.ts

@@ -0,0 +1,155 @@
+import { TableRowData } from '../../components/organisms/Table/Table';
+export declare enum ServiceType {
+    ACCOMMODATION = "accommodation",
+    TRANSFER = "transfer",
+    EXCURSION = "excursion",
+    OTHER_SERVICE = "otherService"
+}
+export interface HotelAmenity {
+    AmenityIcon: string;
+    AmenityName: string;
+}
+export interface CancellationPolicy {
+    Description: string;
+    Value: number;
+    ValidFrom: string;
+    ValidTo: string;
+}
+export interface Offer {
+    OfferId: number;
+    OfferValue: number;
+    OfferName: string;
+    OfferType: string;
+    OfferDescription: string;
+}
+export interface Room extends TableRowData<DetailResumeItem> {
+    RoomDetailId: number;
+    Offers: Offer[];
+    Mandatory: any[];
+    RoomStatus: string;
+    RoomName: string;
+    RoomAmenities: Record<string, any>;
+    RoomImage: string;
+    AdultCount: number;
+    TeenCount: number;
+    ChildCount: number;
+    InfantCount: number;
+    MealPlanId: number;
+    MealPlan: string;
+    cancellation_policy: CancellationPolicy[];
+    ClientCategory: string;
+    Total: string;
+    GroupingUuid: string;
+    ClientDetails: any[];
+    ChildAge?: number[];
+    TeenAge?: number[];
+    InfantAge?: number[];
+    Dates: string[];
+}
+export interface DetailResumeAccommodation extends TableRowData<DetailResumeItem>, Partial<Room> {
+    Type: ServiceType;
+    HotelId: number;
+    HotelName: string;
+    HotelAmenities: HotelAmenity[];
+    MainImage: string;
+    Images: string[];
+    Total: string;
+    Currency: string;
+    Description: string;
+    TitleDescription: string;
+    Rooms: Room[];
+}
+export interface DetailResumeTransfer extends TableRowData<DetailResumeItem> {
+    Type: ServiceType;
+    ServiceId: number;
+    TransferType: 'ARV' | 'DEP' | string;
+    LocationFromId: number;
+    LocationToId: number;
+    Remarks: string | null;
+    Flight: any | null;
+    TransferCategoryId: number;
+    VehicleTypeId: number;
+    Currency: string;
+    TotalPrice: string;
+    TransferDate: string;
+    TransferTime: string;
+    AdultCount: number;
+    TeenCount: number;
+    ChildCount: number;
+    InfantCount: number;
+    BabySeat: number;
+    AirConditionning: boolean;
+    LuggageTruck: number;
+    LuggageCar: number;
+    CarCount: number;
+    ChildAge: number[];
+    TeenAge: number[];
+    InfantAge: number[];
+    HandlingFee: string;
+    VehicleImage: string;
+    MaxLuggage: string;
+    BabySeatId: number;
+    BabySeatDetailId: number;
+    TransferCategoryName: string;
+    VehicleTypeName: string;
+    LocationFromName: string;
+    LocationFromDetails: string;
+    LocationToName: string;
+    LocationToDetails: string;
+}
+export interface DetailResumeExcursion extends TableRowData<DetailResumeItem> {
+    Type: ServiceType;
+    ServiceId: number;
+    ExcursionID: number;
+    ExcursionCategoryID: number;
+    ServiceDate: string;
+    SelectedHotelId: number;
+    Currency: string;
+    SelectedHotel: string;
+    SelectedHotelDetails: string;
+    LocationToName: string;
+    LocationToDetails: string;
+    ToursType: string;
+    Remarks: string;
+    ClientDetails: any[];
+    AdultCount: number;
+    TeenCount: number;
+    ChildCount: number;
+    InfantCount: number;
+    TotalPrice: string;
+    Description: string;
+    TransferType: string;
+    AvailableLanguages: string[];
+    Duration: string;
+    ExcursionName: string;
+    MealIncluded: boolean;
+    ServiceName: string;
+    TransferIncluded: boolean;
+    Tagline: string;
+    Region: string;
+    MiniDescription: string;
+    CancellationPolicy: string;
+    MainExcursionImage: string;
+    Accessibility: string;
+}
+export interface DetailResumeOtherService extends TableRowData<DetailResumeItem> {
+    Type: ServiceType;
+    quote: number;
+    service_for: string;
+    service_detail_id: number;
+    service_date: string;
+    remarks: string;
+    currency: string;
+    unit: number;
+    adult_pax: number;
+    child_pax: number;
+    teen_pax: number;
+    infant_pax: number;
+    child_age: number[] | null;
+    teen_age: number[] | null;
+    infant_age: number[] | null;
+    total_price: string;
+    created_at: string;
+    active: number;
+}
+export type DetailResumeItem = DetailResumeAccommodation | DetailResumeTransfer | DetailResumeExcursion | DetailResumeOtherService;

package/dist/types/table/detail-resume.types.js

@@ -0,0 +1,7 @@
+export var ServiceType;
+(function (ServiceType) {
+    ServiceType["ACCOMMODATION"] = "accommodation";
+    ServiceType["TRANSFER"] = "transfer";
+    ServiceType["EXCURSION"] = "excursion";
+    ServiceType["OTHER_SERVICE"] = "otherService";
+})(ServiceType || (ServiceType = {}));

package/dist/types/table/index.d.ts

@@ -0,0 +1,3 @@
+export * from './action-dropdown-type.types';
+export * from './detail-resume.types';
+export * from './quotation.types';

package/dist/types/table/index.js

@@ -0,0 +1,3 @@
+export * from './action-dropdown-type.types';
+export * from './detail-resume.types';
+export * from './quotation.types';

package/dist/types/table/quotation.types.d.ts

@@ -0,0 +1,23 @@
+import { TableRowData } from '../../components/organisms/Table/Table';
+export interface QuotationListItem extends TableRowData<QuotationListItem> {
+    agency_name: string;
+    client_type: string;
+    created_by: string;
+    created_date: string;
+    status: string;
+    file_name: string;
+    file_nb: string;
+    date: string[];
+    service_count: {
+        accom_count: number;
+        transfer_count: number;
+        tours_count: number;
+        others_count: number;
+    };
+    pax_details: {
+        adult: number;
+        teen: number;
+        child: number;
+        infant: number;
+    };
+}

package/dist/types/table/quotation.types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "private": false,
   "description": "Bibliothèque de composants Motorco pour le redesign",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "engines": {
+    "node": ">=23.0.0"
+  },
   "files": [
     "dist",
     "src/components",
@@ -24,6 +27,7 @@
   "dependencies": {
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
@@ -36,6 +40,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.554.0",
+    "motion": "^12.23.26",
     "react": "^19.1.1",
     "react-day-picker": "^9.11.2",
     "react-dom": "^19.1.1",

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;
+