mautourco-components 0.1.1

package/README.md

@@ -0,0 +1,187 @@
+# Motorco - Bibliothèque de composants
+
+Ce projet contient la bibliothèque de composants Motorco pour le redesign. Il est publié comme package npm privé et peut être installé dans d'autres projets React.
+
+## 🚀 Installation du package
+
+### Dans votre projet (B2B_react ou autre)
+```bash
+npm install mautourco-components
+```
+
+## 💻 Utilisation des composants
+
+### 1. Importer les styles
+```tsx
+// Dans votre index.tsx ou App.tsx
+import 'mautourco-components/src/styles/tokens/tokens.css';
+import 'mautourco-components/src/styles/components/forms.css';
+import 'mautourco-components/src/styles/components/typography.css';
+import 'mautourco-components/src/styles/components/organism/topnavigation.css';
+import 'mautourco-components/src/styles/components/organism/footer.css';
+```
+
+### 2. Utiliser les composants
+
+#### Exemple avec des atoms et molecules
+```tsx
+import React from 'react';
+import { 
+  Input, 
+  Checkbox, 
+  Text, 
+  Heading, 
+  Icon,
+  MultiSelectDropdown 
+} from 'mautourco-components';
+
+function App() {
+  return (
+    <div>
+      <Heading level="h1">Mon Application</Heading>
+      
+      <Input 
+        placeholder="Votre nom"
+        icon="user"
+        iconPosition="leading"
+      />
+      
+      <Checkbox 
+        label="J'accepte les conditions"
+        onChange={(checked) => console.log(checked)}
+      />
+      
+      <Icon name="search" size="md" />
+    </div>
+  );
+}
+```
+
+#### Exemple avec des organisms (TopNavigation et Footer)
+```tsx
+import React from 'react';
+import { TopNavigation, Footer, Icon } from 'mautourco-components';
+import type { TopNavigationProps, FooterProps } from 'mautourco-components';
+
+// Exemple avec TopNavigation
+const navigationLinks = [
+  { label: 'Accueil', route: '/', isButton: false },
+  { label: 'Services', route: '/services', isButton: false },
+  { label: 'Contact', route: '/contact', isButton: true },
+];
+
+const Logo = () => <Icon name="mautourcoLogo" size="md" />;
+
+function App() {
+  const handleLinkClick = (link: { label: string; route: string }) => {
+    // Gérer la navigation (ex: avec React Router)
+    console.log('Navigation vers:', link.route);
+  };
+
+  return (
+    <div>
+      <TopNavigation
+        links={navigationLinks}
+        logoUrl={Logo}
+        homeUrl="/"
+        active="Accueil"
+        onLinkClick={handleLinkClick}
+        onLogin={() => console.log('Login')}
+        onLogout={() => console.log('Logout')}
+      />
+      
+      {/* Votre contenu principal */}
+      <main>...</main>
+      
+      <Footer
+        logo={<Logo />}
+        columns={[
+          {
+            id: 'menu-1',
+            title: 'Navigation',
+            links: [
+              { label: 'Accueil', href: '/', onClick: () => handleLinkClick({ label: 'Accueil', route: '/' }) },
+              { label: 'Services', href: '/services' },
+            ],
+          },
+        ]}
+        contact={{
+          title: 'Contact',
+          addressLines: ['84, Gustave Colin Street', 'Forest Side 74414, Mauritius'],
+          phone: '+ (230) 604 3000',
+          email: 'info@mautourco.com',
+        }}
+        socials={[
+          { id: 'fb', label: 'Facebook', href: '#', icon: <Icon name="facebook" size="md" /> },
+          { id: 'in', label: 'LinkedIn', href: '#', icon: <Icon name="linkedin" size="md" /> },
+        ]}
+        homeUrl="/"
+        onLinkClick={handleLinkClick}
+      />
+    </div>
+  );
+}
+```
+
+## 📦 Composants disponibles
+
+### Atoms (Composants de base)
+- `Input` - Champ de saisie avec variantes
+- `Checkbox` - Case à cocher
+- `Text` - Texte avec variantes de style
+- `Heading` - Titres (h1, h2, h3, etc.)
+- `Icon` - Icônes avec différentes tailles
+- `Spinner` - Indicateur de chargement
+- `Textarea` - Zone de texte multi-lignes
+- `DropdownInput` - Champ de saisie avec dropdown
+- `SelectedValue` - Affichage de valeur sélectionnée
+
+### Molecules (Composants composés)
+- `MultiSelectDropdown` - Dropdown de sélection multiple
+
+### Organisms (Composants complexes)
+- `TopNavigation` - Navigation responsive avec support mobile/desktop, authentification et gestion d'agence
+- `Footer` - Pied de page responsive avec colonnes de menu, contact et réseaux sociaux
+
+### Variantes de Spinner
+- `ButtonSpinner` - Spinner pour boutons
+- `LoadingSpinner` - Spinner de chargement général
+
+### Icônes individuelles
+- `CheckIcon`, `ChevronIcon`, `CloseIcon`
+- `SearchIcon`, `SettingsIcon`, `UserIcon`
+
+## 🔄 Mise à jour du package
+
+```bash
+# Dans votre projet
+npm update mautourco-components
+```
+
+## 🛠️ Développement du package
+
+### Scripts disponibles
+```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 publish             # Publication sur npm (après login)
+```
+
+### Ajout de nouveaux composants
+1. Créez votre composant dans `src/components/`
+2. Ajoutez l'export dans `src/index.ts`
+3. `npm run build:package`
+4. `npm publish`
+
+## 📝 Notes importantes
+
+- **Styles** : Les composants nécessitent l'import des fichiers CSS correspondants
+- **TypeScript** : Tous les composants sont typés
+- **Design tokens** : Générés automatiquement depuis le dossier `tokens/`
+
+## 🆘 Dépannage
+
+- **Composant non trouvé** : Vérifiez qu'il est exporté dans `src/index.ts`
+- **Styles manquants** : Assurez-vous d'importer les fichiers CSS nécessaires
+- **Erreur de build** : Vérifiez que tous les composants exportés existent réellement

package/dist/components/atoms/Avatar/Avatar.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type AvatarShape = "circle" | "rounded";
+export type AvatarColor = "gray" | "blue" | "pink" | "orange" | "green";
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    color?: AvatarColor;
+    className?: string;
+}
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/components/atoms/Avatar/Avatar.js

@@ -0,0 +1,31 @@
+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 } from "react/jsx-runtime";
+// src/components/Avatar.tsx
+import React from "react";
+// styling is driven by semantic classnames defined in `src/styles/components/avatar.css`
+export var Avatar = function (_a) {
+    var _b, _c, _d, _e;
+    var src = _a.src, alt = _a.alt, name = _a.name, _f = _a.size, size = _f === void 0 ? "md" : _f, _g = _a.shape, shape = _g === void 0 ? "circle" : _g, _h = _a.color, color = _h === void 0 ? "blue" : _h, _j = _a.className, className = _j === void 0 ? "" : _j;
+    var _k = React.useState(false), error = _k[0], setError = _k[1];
+    var initial = (_e = (_c = (_b = name === null || name === void 0 ? void 0 : name.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : (_d = alt === null || alt === void 0 ? void 0 : alt.charAt(0)) === null || _d === void 0 ? void 0 : _d.toUpperCase()) !== null && _e !== void 0 ? _e : "A";
+    var classes = [
+        'avatar',
+        "avatar--".concat(size),
+        "avatar--".concat(shape),
+        !src || error ? "avatar--".concat(color) : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", __assign({ className: classes, "aria-label": alt || name }, { children: src && !error ? (_jsx("img", { src: src, alt: alt || name, className: "avatar__img", onError: function () { return setError(true); } })) : (_jsx("span", __assign({ className: "avatar__initial" }, { children: initial }))) })));
+};

package/dist/components/atoms/Button/Button.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { IconName } from '../Icon/Icon';
+import './Button.css';
+export interface ButtonProps {
+    /** Variant du bouton */
+    variant?: 'primary' | 'secondary' | 'outline' | 'outline-primary' | 'outline-secondary';
+    /** Taille du bouton */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Contenu du bouton */
+    children: React.ReactNode;
+    /** Icône affichée avant le libellé */
+    leadingIcon?: IconName;
+    /** Icône affichée après le libellé */
+    trailingIcon?: IconName;
+    /** Taille des icônes */
+    iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** État désactivé */
+    disabled?: boolean;
+    /** Handler de clic */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Type de bouton */
+    type?: 'button' | 'submit' | 'reset';
+    /** Classes CSS supplémentaires */
+    className?: string;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/atoms/Button/Button.js

@@ -0,0 +1,35 @@
+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 Icon from '../Icon/Icon';
+import './Button.css';
+var Button = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, children = _a.children, leadingIcon = _a.leadingIcon, trailingIcon = _a.trailingIcon, _d = _a.iconSize, iconSize = _d === void 0 ? 'sm' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, onClick = _a.onClick, _f = _a.type, type = _f === void 0 ? 'button' : _f, _g = _a.className, className = _g === void 0 ? '' : _g;
+    var baseClasses = 'button';
+    var normalizedVariant = variant === 'outline' ? 'outline-primary' : variant;
+    var variantClass = "button--".concat(normalizedVariant);
+    var sizeClass = "button--".concat(size);
+    var disabledClass = disabled ? 'button--disabled' : '';
+    var buttonClasses = [
+        baseClasses,
+        variantClass,
+        sizeClass,
+        disabledClass,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var hasLeadingIcon = Boolean(leadingIcon);
+    var hasTrailingIcon = Boolean(trailingIcon);
+    return (_jsxs("button", __assign({ type: type, className: buttonClasses, disabled: disabled, onClick: onClick }, { children: [hasLeadingIcon && (_jsx("span", __assign({ className: "button__icon button__icon--leading" }, { children: _jsx(Icon, { name: leadingIcon, size: iconSize }) }))), _jsx("span", __assign({ className: "button__label" }, { children: children })), hasTrailingIcon && (_jsx("span", __assign({ className: "button__icon button__icon--trailing" }, { children: _jsx(Icon, { name: trailingIcon, size: iconSize }) })))] })));
+};
+export default Button;

package/dist/components/atoms/Checkbox/Checkbox.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface CheckboxProps {
+    checked?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+    id?: string;
+    leadingContent?: React.ReactNode;
+}
+declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

package/dist/components/atoms/Checkbox/Checkbox.js

@@ -0,0 +1,33 @@
+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 Check from '../Icon/icons/Check';
+var Checkbox = function (_a) {
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, label = _a.label, onChange = _a.onChange, _e = _a.className, className = _e === void 0 ? '' : _e, id = _a.id, leadingContent = _a.leadingContent;
+    var handleChange = function (e) {
+        if (!disabled && onChange) {
+            onChange(e.target.checked);
+        }
+    };
+    var getStateClasses = function () {
+        if (disabled)
+            return 'checkbox--disabled';
+        if (error)
+            return 'checkbox--error';
+        if (checked)
+            return 'checkbox--checked';
+        return 'checkbox--default';
+    };
+    var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
+    return (_jsx("div", __assign({ className: "checkbox-container ".concat(getStateClasses(), " ").concat(className) }, { children: _jsxs("div", __assign({ className: "checkbox-wrapper" }, { children: [_jsx("input", { type: "checkbox", id: checkboxId, checked: checked, disabled: disabled, onChange: handleChange, className: "checkbox-input" }), _jsxs("label", __assign({ htmlFor: checkboxId, className: "checkbox-label" }, { children: [_jsx("div", __assign({ className: "checkbox-box" }, { children: checked && (_jsx(Check, { size: "sm", className: "checkbox-icon" })) })), leadingContent && (_jsx("span", __assign({ className: "checkbox-leading" }, { children: leadingContent }))), label && (_jsx("span", __assign({ className: "checkbox-text" }, { children: label })))] }))] })) })));
+};
+export default Checkbox;

package/dist/components/atoms/Icon/Icon.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export type IconName = "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "check" | "close" | "search" | "user" | "user-icon" | "calendar" | "arrival" | "departure" | "map-pin" | "delete" | "eye" | "info" | "check-circle" | "stroller" | "chevron-down-new" | "car" | "more" | "settings" | "menu" | "mautourcoLogo" | "youtube" | "facebook" | "linkedin" | "twitter";
+interface IconProps {
+    name: IconName;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    className?: string;
+    color?: string;
+}
+declare const Icon: React.FC<IconProps>;
+export default Icon;

package/dist/components/atoms/Icon/Icon.js

@@ -0,0 +1,102 @@
+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 } from "react/jsx-runtime";
+import Chevron from "./icons/Chevron";
+import Check from "./icons/Check";
+import Close from "./icons/Close";
+import Search from "./icons/Search";
+import User from "./icons/User";
+import UserIcon from "./icons/UserIcon";
+import CalendarIcon from "./icons/CalendarIcon";
+import ArrivalIcon from "./icons/ArrivalIcon";
+import DepartureIcon from "./icons/DepartureIcon";
+import MapPinIcon from "./icons/MapPinIcon";
+import DeleteIcon from "./icons/DeleteIcon";
+import EyeIcon from "./icons/EyeIcon";
+import InfoIcon from "./icons/InfoIcon";
+import CheckCircleIcon from "./icons/CheckCircleIcon";
+import StrollerIcon from "./icons/StrollerIcon";
+import ChevronDownIcon from "./icons/ChevronDownIcon";
+import CarIcon from "./icons/CarIcon";
+import MoreIcon from "./icons/MoreIcon";
+import Settings from "./icons/Settings";
+import MenuIcon from "./icons/MenuIcon";
+import MautourcoLogo from "./icons/MautoucoLogo";
+import YouTubeIcon from "./icons/Youtube";
+import FacebookIcon from "./icons/FacebookIcon";
+import TwitterIcon from "./icons/TwitterIcon";
+import LinkedInIcon from "./icons/LinkedInIcon";
+var Icon = function (_a) {
+    var name = _a.name, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, color = _a.color;
+    var iconProps = { size: size, className: className, color: color };
+    switch (name) {
+        case "chevron-down":
+            return _jsx(Chevron, __assign({ direction: "down" }, iconProps));
+        case "chevron-up":
+            return _jsx(Chevron, __assign({ direction: "up" }, iconProps));
+        case "chevron-left":
+            return _jsx(Chevron, __assign({ direction: "left" }, iconProps));
+        case "chevron-right":
+            return _jsx(Chevron, __assign({ direction: "right" }, iconProps));
+        case "check":
+            return _jsx(Check, __assign({}, iconProps));
+        case "close":
+            return _jsx(Close, __assign({}, iconProps));
+        case "search":
+            return _jsx(Search, __assign({}, iconProps));
+        case "user":
+            return _jsx(User, __assign({}, iconProps));
+        case "user-icon":
+            return _jsx(UserIcon, __assign({}, iconProps));
+        case "calendar":
+            return _jsx(CalendarIcon, __assign({}, iconProps));
+        case "arrival":
+            return _jsx(ArrivalIcon, __assign({}, iconProps));
+        case "departure":
+            return _jsx(DepartureIcon, __assign({}, iconProps));
+        case "map-pin":
+            return _jsx(MapPinIcon, __assign({}, iconProps));
+        case "delete":
+            return _jsx(DeleteIcon, __assign({}, iconProps));
+        case "eye":
+            return _jsx(EyeIcon, __assign({}, iconProps));
+        case "info":
+            return _jsx(InfoIcon, __assign({}, iconProps));
+        case "check-circle":
+            return _jsx(CheckCircleIcon, __assign({}, iconProps));
+        case "stroller":
+            return _jsx(StrollerIcon, __assign({}, iconProps));
+        case "chevron-down-new":
+            return _jsx(ChevronDownIcon, __assign({}, iconProps));
+        case "car":
+            return _jsx(CarIcon, __assign({}, iconProps));
+        case "more":
+            return _jsx(MoreIcon, __assign({}, iconProps));
+        case "settings":
+            return _jsx(Settings, __assign({}, iconProps));
+        case "menu":
+            return _jsx(MenuIcon, __assign({}, iconProps));
+        case "mautourcoLogo":
+            return _jsx(MautourcoLogo, __assign({}, iconProps));
+        case "youtube":
+            return _jsx(YouTubeIcon, __assign({}, iconProps));
+        case "facebook":
+            return _jsx(FacebookIcon, __assign({}, iconProps));
+        case "twitter":
+            return _jsx(TwitterIcon, __assign({}, iconProps));
+        case "linkedin":
+            return _jsx(LinkedInIcon, __assign({}, iconProps));
+        default:
+            return null;
+    }
+};
+export default Icon;

package/dist/components/atoms/Icon/icons/ArrivalIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ArrivalIconProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    color?: string;
+}
+declare const ArrivalIcon: React.FC<ArrivalIconProps>;
+export default ArrivalIcon;

package/dist/components/atoms/Icon/icons/ArrivalIcon.js

@@ -0,0 +1,31 @@
+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";
+var ArrivalIcon = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, color = _a.color;
+    var getSizeClasses = function () {
+        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';
+        }
+    };
+    // Base viewBox covers both plane and baseline
+    var sizeClasses = getSizeClasses();
+    var colorClass = color ? "text-".concat(color) : 'text-current';
+    var classes = "".concat(sizeClasses, " ").concat(colorClass, " ").concat(className);
+    return (_jsxs("svg", __assign({ className: classes, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M8.61046 1.06519C8.82677 1.38315 8.95172 1.75476 8.96985 2.13883L9.14241 5.47813L9.1424 5.48576C9.1471 5.59416 9.18213 5.69947 9.24321 5.78917C9.30439 5.87888 9.38987 5.94968 9.48914 5.9937L9.49114 5.99458L12.3255 7.26408L12.5211 7.36061C12.9036 7.57143 13.2202 7.88435 13.4351 8.26453L13.5335 8.45952L13.5364 8.46603L13.8064 9.08336C13.9069 9.30978 13.9559 9.555 13.9504 9.80272C13.9449 10.0525 13.8835 10.2979 13.7713 10.5212C13.659 10.7447 13.498 10.9412 13.3006 11.0947C13.1057 11.2463 12.8793 11.3511 12.6385 11.4056L12.639 11.4078L12.0869 11.5361C11.5998 11.6497 11.0835 11.6092 10.6107 11.406L10.6027 11.4024L1.86857 7.52809C1.52107 7.3737 1.22329 7.12683 1.0067 6.81696C0.966794 6.77487 0.930689 6.72861 0.90107 6.67747L0.101396 5.29664C-0.0184861 5.08962 -0.0324841 4.83735 0.0638278 4.61837L1.26385 1.88991C1.43061 1.51075 1.87397 1.33858 2.25314 1.50534L3.00271 1.83502C3.30041 1.96515 3.56325 2.16333 3.77081 2.41331C3.92688 2.60133 4.04874 2.81484 4.13044 3.04381L4.19826 3.27689L4.20767 3.32492L4.22324 3.4186C4.2445 3.50286 4.28365 3.58156 4.3392 3.64852C4.39743 3.71867 4.4715 3.77429 4.55507 3.81073L4.56444 3.81438L4.63703 3.84678L6.13231 0.448073C6.21232 0.266158 6.36131 0.123199 6.54646 0.0510128C6.73183 -0.0211105 6.93952 -0.0165731 7.1216 0.0635088L7.73925 0.335162C8.09167 0.492892 8.39324 0.745985 8.61046 1.06519ZM7.37046 1.90915C7.32544 1.84298 7.26771 1.78679 7.20061 1.74427L5.70506 5.14573C5.62443 5.32903 5.47367 5.47215 5.28667 5.54378C5.09961 5.61541 4.89164 5.6095 4.70916 5.52691L3.95523 5.18434L3.9551 5.18572C3.65673 5.05555 3.39292 4.85703 3.18501 4.60655C2.9771 4.35603 2.83052 4.06025 2.75756 3.74297C2.75392 3.72716 2.75075 3.71096 2.74815 3.69494L2.73246 3.59501C2.71083 3.51301 2.67087 3.43671 2.61662 3.37134C2.55855 3.30146 2.48536 3.24566 2.40212 3.20925L2.39874 3.20825L2.33553 3.17949L1.59002 4.87453L2.1285 5.8046C2.15834 5.8393 2.18558 5.87656 2.20893 5.91679C2.27056 6.02298 2.36437 6.10671 2.47654 6.15663L11.2034 10.0268C11.377 10.1014 11.5654 10.1173 11.7461 10.0751L12.3068 9.94482C12.3334 9.93896 12.3585 9.92741 12.38 9.9107C12.4014 9.89403 12.4186 9.87241 12.4309 9.84816C12.4431 9.82382 12.4501 9.79678 12.4507 9.76955C12.4512 9.74235 12.4456 9.71519 12.4344 9.69037L12.4316 9.68386L12.1639 9.07092C12.0764 8.87771 11.92 8.72384 11.7255 8.63906L11.7189 8.63568L8.87855 7.36354C8.52458 7.20605 8.2213 6.95338 8.00322 6.63313C7.78468 6.3122 7.6599 5.93628 7.64347 5.54836L7.47164 2.21606L7.4714 2.21119C7.46656 2.10317 7.43127 1.99855 7.37046 1.90915Z", fill: "currentColor" }), _jsx("path", { d: "M14.083 0C14.4972 0 14.833 0.335825 14.833 0.75C14.833 1.16421 14.4972 1.5 14.083 1.5H0.75C0.335786 1.5 0 1.16421 0 0.75C4.48366e-05 0.335825 0.335814 0 0.75 0H14.083Z", transform: "translate(0 13)", fill: "currentColor" })] })));
+};
+export default ArrivalIcon;

package/dist/components/atoms/Icon/icons/CalendarIcon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface CalendarIconProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    color?: string;
+    /**
+     * Couleur par défaut si aucune couleur n'est spécifiée
+     */
+    defaultColor?: string;
+}
+declare const CalendarIcon: React.FC<CalendarIconProps>;
+export default CalendarIcon;

package/dist/components/atoms/Icon/icons/CalendarIcon.js

@@ -0,0 +1,41 @@
+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 } from "react/jsx-runtime";
+var CalendarIcon = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, color = _a.color, _d = _a.defaultColor, defaultColor = _d === void 0 ? '#7F8594' : _d;
+    var getSizeClasses = function () {
+        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';
+        }
+    };
+    var getSizeValues = function () {
+        switch (size) {
+            case 'xs': return { width: 10, height: 11 };
+            case 'sm': return { width: 12, height: 13 };
+            case 'md': return { width: 14, height: 15 };
+            case 'lg': return { width: 16, height: 17 };
+            case 'xl': return { width: 18, height: 19 };
+            default: return { width: 14, height: 15 };
+        }
+    };
+    var sizeClasses = getSizeClasses();
+    var sizeValues = getSizeValues();
+    var colorClass = color ? "text-".concat(color) : 'text-current';
+    var classes = "".concat(sizeClasses, " ").concat(colorClass, " ").concat(className);
+    return (_jsx("svg", __assign({ className: classes, width: sizeValues.width, height: sizeValues.height, viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M12 6.83301H1.5V12.75C1.5 13.0721 1.76099 13.3328 2.08301 13.333H11.417C11.739 13.3328 12 13.0721 12 12.75V6.83301ZM4.08984 10.667C4.50406 10.667 4.83984 11.0028 4.83984 11.417C4.83967 11.8311 4.50395 12.167 4.08984 12.167H4.08301C3.66905 12.1668 3.33318 11.8309 3.33301 11.417C3.33301 11.0029 3.66894 10.6672 4.08301 10.667H4.08984ZM6.75684 10.667C7.17097 10.6671 7.50684 11.0028 7.50684 11.417C7.50666 11.831 7.17086 12.1669 6.75684 12.167H6.75C6.3359 12.167 6.00018 11.8311 6 11.417C6 11.0028 6.33579 10.667 6.75 10.667H6.75684ZM9.42285 10.667C9.83706 10.667 10.1729 11.0028 10.1729 11.417C10.1727 11.8311 9.83696 12.167 9.42285 12.167H9.41699C9.00289 12.167 8.66717 11.8311 8.66699 11.417C8.66699 11.0028 9.00278 10.667 9.41699 10.667H9.42285ZM4.08984 8L4.16699 8.00391C4.54504 8.04246 4.83984 8.36178 4.83984 8.75C4.83984 9.13822 4.54504 9.45754 4.16699 9.49609L4.08984 9.5H4.08301C3.66894 9.49982 3.33301 9.1641 3.33301 8.75C3.33301 8.33589 3.66894 8.00018 4.08301 8H4.08984ZM6.75684 8L6.83301 8.00391C7.21136 8.04216 7.50684 8.36156 7.50684 8.75C7.50684 9.13844 7.21136 9.45784 6.83301 9.49609L6.75684 9.5H6.75C6.33579 9.5 6 9.16421 6 8.75C6 8.33579 6.33579 8 6.75 8H6.75684ZM9.42285 8L9.5 8.00391C9.8782 8.04231 10.1729 8.36167 10.1729 8.75C10.1729 9.13833 9.8782 9.45769 9.5 9.49609L9.42285 9.5H9.41699C9.00278 9.5 8.66699 9.16421 8.66699 8.75C8.66699 8.33579 9.00278 8 9.41699 8H9.42285ZM8.66699 3.41699V2.83301H4.83301V3.41699C4.83283 3.83106 4.49711 4.16699 4.08301 4.16699C3.66905 4.16682 3.33318 3.83095 3.33301 3.41699V2.83301H2.08301C1.76099 2.83318 1.5 3.09493 1.5 3.41699V5.33301H12V3.41699C12 3.09493 11.739 2.83318 11.417 2.83301H10.167V3.41699C10.1668 3.83095 9.83095 4.16682 9.41699 4.16699C9.00289 4.16699 8.66717 3.83106 8.66699 3.41699ZM13.5 12.75C13.5 13.9005 12.5674 14.8328 11.417 14.833H2.08301C0.932564 14.8328 0 13.9005 0 12.75V3.41699C0 2.26651 0.932564 1.33318 2.08301 1.33301H3.33301V0.75C3.33301 0.335895 3.66894 0.000175955 4.08301 0C4.49722 0 4.83301 0.335786 4.83301 0.75V1.33301H8.66699V0.75C8.66699 0.335786 9.00278 0 9.41699 0C9.83106 0.000175698 10.167 0.335895 10.167 0.75V1.33301H11.417C12.5674 1.33318 13.5 2.26651 13.5 3.41699V12.75Z", fill: "currentColor" }) })));
+};
+export default CalendarIcon;

package/dist/components/atoms/Icon/icons/CarIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CarIconProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    color?: string;
+}
+declare const CarIcon: React.FC<CarIconProps>;
+export default CarIcon;

package/dist/components/atoms/Icon/icons/CarIcon.js

@@ -0,0 +1,30 @@
+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 } from "react/jsx-runtime";
+var CarIcon = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, color = _a.color;
+    var getSizeClasses = function () {
+        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';
+        }
+    };
+    var sizeClasses = getSizeClasses();
+    var colorClass = color ? "text-".concat(color) : 'text-current';
+    var classes = "".concat(sizeClasses, " ").concat(colorClass, " ").concat(className);
+    return (_jsx("svg", __assign({ className: classes, viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M4.08301 6.83301C3.76099 6.83318 3.5 7.09493 3.5 7.41699C3.50018 7.7389 3.7611 7.99982 4.08301 8C4.40507 8 4.66682 7.73901 4.66699 7.41699C4.66699 7.09483 4.40517 6.83301 4.08301 6.83301ZM10.75 6.83301C10.4278 6.83301 10.167 7.09483 10.167 7.41699C10.1672 7.73901 10.4279 8 10.75 8C11.0721 8 11.3328 7.73901 11.333 7.41699C11.333 7.09483 11.0722 6.83301 10.75 6.83301ZM14.833 6.75C14.833 7.12036 14.7068 7.48744 14.4307 7.76367C14.1545 8.03984 13.7873 8.16692 13.417 8.16699H12.6914C12.39 8.94635 11.6357 9.5 10.75 9.5C9.86427 9.5 9.11001 8.94635 8.80859 8.16699H6.02539C5.72403 8.94646 4.96882 9.5 4.08301 9.5C3.19738 9.49986 2.44295 8.94631 2.1416 8.16699H1.41699C1.04663 8.16699 0.679553 8.03981 0.40332 7.76367C0.127069 7.48742 1.08773e-07 7.12044 0 6.75V4.08301C3.58734e-05 3.72816 0.0587414 3.37571 0.173828 3.04004L0.208008 2.95703L1.1416 1.02441L1.17383 0.963867C1.45555 0.494509 1.99662 0 2.75 0H7.41699C8.02313 8.21201e-05 8.52812 0.229169 8.92285 0.508789L9.08496 0.630859L9.14746 0.686523C9.45504 0.994111 9.8275 1.38402 10.1201 1.69336C10.2607 1.84193 10.3843 1.9728 10.4746 2.06934C10.4981 2.07467 10.5232 2.08085 10.5498 2.08691C10.7388 2.12996 11.0034 2.19034 11.3057 2.26172C11.9079 2.40391 12.6696 2.59002 13.2842 2.76074H13.2832C14.1168 2.97812 14.833 3.78677 14.833 4.75V6.75ZM1.5 6.66699H2.1416C2.4428 5.88737 3.19716 5.33314 4.08301 5.33301C4.96903 5.33301 5.72418 5.88722 6.02539 6.66699H8.80762C9.1088 5.88716 9.86393 5.33301 10.75 5.33301C11.6361 5.33301 12.3912 5.88716 12.6924 6.66699H13.333V4.75C13.333 4.52019 13.1268 4.26729 12.9014 4.21094C12.8952 4.20939 12.889 4.20776 12.8828 4.20605C12.2974 4.04344 11.5587 3.86282 10.9609 3.72168C10.6633 3.6514 10.4028 3.5912 10.2168 3.54883C10.1241 3.52772 10.0499 3.51144 9.99902 3.5C9.97361 3.49429 9.95361 3.48927 9.94043 3.48633C9.93409 3.48491 9.92908 3.48413 9.92578 3.4834C9.92422 3.48305 9.92268 3.4826 9.92188 3.48242H9.9209C9.77262 3.44947 9.63762 3.37196 9.53418 3.26074C9.53379 3.26033 9.53204 3.25867 9.53125 3.25781C9.52966 3.2561 9.52752 3.25334 9.52441 3.25C9.51806 3.24317 9.50837 3.2329 9.49609 3.21973C9.47155 3.19338 9.43544 3.15533 9.39062 3.10742C9.30073 3.01132 9.17495 2.87658 9.03027 2.72363C8.75146 2.42889 8.40768 2.07006 8.12207 1.7832C7.87973 1.59523 7.64931 1.50009 7.41699 1.5H2.75C2.72309 1.5 2.68485 1.50768 2.63184 1.54395C2.57804 1.58075 2.51904 1.64171 2.46777 1.72363L1.58301 3.55762C1.52838 3.72738 1.50003 3.90454 1.5 4.08301V6.66699Z", fill: "currentColor" }) })));
+};
+export default CarIcon;

package/dist/components/atoms/Icon/icons/Check.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CheckProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    color?: string;
+}
+declare const Check: React.FC<CheckProps>;
+export default Check;

package/dist/components/atoms/Icon/icons/Check.js

@@ -0,0 +1,30 @@
+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 } from "react/jsx-runtime";
+var Check = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, color = _a.color;
+    var getSizeClasses = function () {
+        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';
+        }
+    };
+    var sizeClasses = getSizeClasses();
+    var colorClass = color ? "text-".concat(color) : '';
+    var classes = "".concat(sizeClasses, " ").concat(colorClass, " ").concat(className).trim();
+    return (_jsx("svg", __assign({ className: classes, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, { children: _jsx("path", { d: "M20 6L9 17L4 12" }) })));
+};
+export default Check;