mautourco-components 0.2.142 → 0.2.144

package/dist/components/molecules/LanguageSelector/LanguageSelector.css

@@ -0,0 +1,120 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* Language Selector - Trigger */
+.language-selector__trigger {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  height: 44px;
+  border: solid 1px var(--color-tuna-500);
+  border-radius: 12px;
+  transition: all 0.5s ease;
+  &:hover {
+    border-color: #262626;
+  }
+  &.language-selector__trigger--with-text {
+    border-color: #262626;
+    color: #262626;
+  }
+}
+
+.language-selector__placeholder {
+  color: var(--color-tuna-500);
+}
+
+.language-selector__trigger-icon {
+  flex-shrink: 0;
+  color: var(--color-neutral-800);
+}
+
+.language-selector__trigger-text {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  color: var(--color-neutral-800);
+}
+
+.language-selector__trigger-chevron {
+  flex-shrink: 0;
+  color: var(--color-neutral-800);
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.language-selector__trigger[data-state='open'] .language-selector__trigger-chevron {
+  transform: rotate(180deg);
+}
+
+/* Popover */
+.language-selector__popover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding: var(--spacing-padding-px-2);
+  border-radius: var(--border-radius-rounded-xl);
+  min-width: 8rem;
+}
+
+/* Popover Content */
+.language-selector__content {
+  display: flex;
+  flex-direction: column;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  min-width: 8rem;
+}
+
+.language-selector__option {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  column-gap: 0.5rem;
+  height: 2.25rem;
+  padding-inline: var(--spacing-padding-px-3);
+  border-radius: var(--border-radius-rounded-md);
+  font-size: var(--typography-font-size-sm);
+  font-weight: var(--typography-font-weight-medium);
+  color: var(--color-neutral-800);
+  transition: background-color 0.2s ease;
+}
+
+.language-selector__option:hover {
+  background-color: var(--color-neutral-100);
+}
+
+.language-selector__option--selected {
+  background-color: var(--color-neutral-100);
+}
+
+.language-selector__selected-language {
+  display: flex;
+  align-items: center;
+  column-gap: 0.5rem;
+}
+
+.language-selector__flag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1rem;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: 1rem;
+  overflow: hidden;
+  border-radius: 9999px;
+  .fi {
+    width: 1rem;
+  }
+  .fi {
+    flex: 0 0 1.333333em;
+  }
+}

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

@@ -0,0 +1,11 @@
+import 'flag-icons/css/flag-icons.min.css';
+import './LanguageSelector.css';
+export declare const defaultLanguages: string[];
+export interface LanguageSelectorProps {
+    languages?: string[];
+    defaultLanguage?: string;
+    placeholder?: string;
+    onSelectLanguage?: (language: string) => void;
+    label?: string;
+}
+export default function LanguageSelector(props: LanguageSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/LanguageSelector/LanguageSelector.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils';
+import 'flag-icons/css/flag-icons.min.css';
+import { useEffect, useState } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
+import { languagesMap } from '../ServiceLanguages/constant';
+import './LanguageSelector.css';
+export var defaultLanguages = ['English', 'Français', 'German', 'Italian'];
+export default function LanguageSelector(props) {
+    var _a = props.languages, languages = _a === void 0 ? defaultLanguages : _a, defaultLanguage = props.defaultLanguage, _b = props.placeholder, placeholder = _b === void 0 ? 'Prefered language' : _b, label = props.label, onSelectLanguage = props.onSelectLanguage;
+    var _c = useState(false), open = _c[0], setOpen = _c[1];
+    var _d = useState(defaultLanguage), selectedLanguage = _d[0], setSelectedLanguage = _d[1];
+    var handleSelectLanguage = function (language) {
+        setSelectedLanguage(language);
+        onSelectLanguage === null || onSelectLanguage === void 0 ? void 0 : onSelectLanguage(language);
+        setOpen(false);
+    };
+    useEffect(function () {
+        setSelectedLanguage(defaultLanguage);
+    }, [defaultLanguage]);
+    return (_jsxs("div", { children: [label && (_jsx("label", { className: "mb-2", children: _jsx(Text, { size: "sm", as: "span", children: label }) })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn('language-selector__trigger', {
+                                'language-selector__trigger--with-text': !!selectedLanguage,
+                            }), children: [selectedLanguage ? (_jsxs("span", { className: "language-selector__selected-language", children: [_jsx("span", { className: "language-selector__flag", children: _jsx("i", { className: "fi fi-".concat(languagesMap[selectedLanguage.toLowerCase()]) }) }), selectedLanguage] })) : (_jsx("span", { className: "language-selector__placeholder", children: placeholder })), _jsx(Icon, { name: "chevron-down", size: "sm", className: "language-selector__trigger-chevron" })] }) }), _jsx(PopoverContent, { className: "language-selector__popover", align: "end", side: "bottom", sideOffset: 8, children: _jsx("div", { className: "language-selector__content", children: languages.map(function (language) { return (_jsxs("div", { className: cn('language-selector__option', {
+                                    'language-selector__option--selected': selectedLanguage === language,
+                                }), onClick: function () { return handleSelectLanguage(language); }, children: [_jsx("span", { className: "language-selector__flag", children: _jsx("i", { className: "fi fi-".concat(languagesMap[language.toLowerCase()]) }) }), language] }, language)); }) }) })] })] }));
+}

package/dist/components/molecules/TextWithIcon/TextWithIcon.js

@@ -15,6 +15,6 @@ import { Text, } from '../../atoms/Typography/Typography';
  */
 function TextWithIcon(props) {
     var icon = props.icon, children = props.children, _a = props.iconSize, iconSize = _a === void 0 ? 'sm' : _a, _b = props.textSize, textSize = _b === void 0 ? 'sm' : _b, _c = props.color, color = _c === void 0 ? 'default' : _c, _d = props.textLeading, textLeading = _d === void 0 ? '5' : _d, _e = props.textVariant, textVariant = _e === void 0 ? 'medium' : _e;
-    return (_jsxs("div", { className: cn('flex gap-x-2', color === 'yellow' && 'text-[var(--color-yellow-600)]', color === 'accent' && 'text-[var(--color-text-accent)]'), children: [icon && (_jsx("span", { className: "relative top-[2px]", children: _jsx(Icon, { name: icon, size: iconSize }) })), _jsx(Text, { variant: textVariant, size: textSize, className: "flex items-center gap-x-2", color: color, leading: textLeading, as: "div", children: children })] }));
+    return (_jsxs("div", { className: cn('flex gap-x-2 items-center', color === 'yellow' && 'text-[var(--color-yellow-600)]', color === 'accent' && 'text-[var(--color-text-accent)]'), children: [icon && (_jsx("span", { className: "relative top-[2px]", children: _jsx(Icon, { name: icon, size: iconSize }) })), _jsx(Text, { variant: textVariant, size: textSize, className: "flex items-center gap-x-2", color: color, leading: textLeading, as: "div", children: children })] }));
 }
 export default TextWithIcon;

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

@@ -3,14 +3,23 @@ import React from 'react';
 import '../../../styles/components/organism/docket.css';
 import { DocketService } from '../../../types/docket/services.types';
 import { ActionDropdownItem } from '../../molecules/ActionDropdown/ActionDropdown';
+import { DocketFooterLabelsType } from './DocketFooter';
 export { DocketCollapsedHeader } from './DocketCollapsedHeader';
 export type { DocketCollapsedHeaderProps } from './DocketCollapsedHeader';
 export { DocketEmptyState } from './DocketEmptyState';
-export type { DocketEmptyStateProps } from './DocketEmptyState';
+export type { DocketEmptyStateLabelsType, DocketEmptyStateProps, } from './DocketEmptyState';
 export { DocketFooter } from './DocketFooter';
 export type { DocketFooterProps } from './DocketFooter';
 export { DocketHeader } from './DocketHeader';
 export type { DocketHeaderProps } from './DocketHeader';
+export type DocketLabelsType = {
+    manageQuotation: string;
+    close: string;
+    /** Bold part of the empty state message */
+    emptyStateBold?: string;
+    /** Regular part of the empty state message */
+    emptyStateRegular?: string;
+} & DocketFooterLabelsType;
 export interface DocketProps {
     /**
      * Array of nested Docket objects
@@ -89,10 +98,6 @@ export interface DocketProps {
      * Optional click handler
      */
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Optional data attributes for testing or tracking
-     */
-    'data-testid'?: string;
     /**
      * Remove mode - replaces price chips with remove buttons in all service dockets
      */
@@ -102,11 +107,31 @@ export interface DocketProps {
      * Receives the service index and service data
      */
     onServiceRemove?: (index: number, service: DocketService) => void;
+    /**
+     * Button done mode - replaces the "Book now" button with a "Done" button
+     */
+    doneButtonMode?: boolean;
+    /**
+     * Handler for the "Done" button click
+     */
+    onDoneClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Labels for the docket
+     */
+    labels?: DocketLabelsType;
+    /**
+     * Maximum number of proposals
+     */
+    maxProposals?: number;
+    /**
+     * URL of the empty state illustration image (when there are no proposals or no services)
+     */
+    emptyStateImageUrl?: string;
 }
 /**
  * Docket is a container component for displaying quotation/docket information.
  * It provides a structured layout for travel booking summaries with sections
  * for accommodation, services, pricing, and actions.
  */
-export declare const Docket: React.FC<DocketProps>;
+export declare function Docket({ proposals, activeProposal: initialActiveProposal, onProposalSelect, title, moreOptions, accordionMoreOptions, onMoreOptionsClick, onAddNewQuoteClick, onCompareClick, onViewClick, onSaveClick, onBookNowClick, className, containerClassName, onClick, removeMode, onServiceRemove, doneButtonMode, onDoneClick, maxProposals, emptyStateImageUrl, labels, }: DocketProps): React.ReactElement;
 export default Docket;

package/dist/components/organisms/Docket/Docket.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import { Breakpoint } from '../../../hooks/useMobile';
 import '../../../styles/components/organism/docket.css';
 import Icon from '../../atoms/Icon/Icon';
 import { AccomodationDocket } from '../../molecules/AccomodationDocket/AccomodationDocket';
@@ -22,14 +23,25 @@ export { DocketHeader } from './DocketHeader';
  * It provides a structured layout for travel booking summaries with sections
  * for accommodation, services, pricing, and actions.
  */
-export var Docket = function (_a) {
-    var proposals = _a.proposals, _b = _a.activeProposal, initialActiveProposal = _b === void 0 ? 0 : _b, onProposalSelect = _a.onProposalSelect, _c = _a.title, title = _c === void 0 ? 'Your quotation' : _c, moreOptions = _a.moreOptions, accordionMoreOptions = _a.accordionMoreOptions, onMoreOptionsClick = _a.onMoreOptionsClick, onAddNewQuoteClick = _a.onAddNewQuoteClick, onCompareClick = _a.onCompareClick, onViewClick = _a.onViewClick, onSaveClick = _a.onSaveClick, onBookNowClick = _a.onBookNowClick, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.containerClassName, containerClassName = _e === void 0 ? '' : _e, onClick = _a.onClick, testId = _a["data-testid"], _f = _a.removeMode, removeMode = _f === void 0 ? false : _f, onServiceRemove = _a.onServiceRemove;
-    var _g = useState(false), isOpen = _g[0], setIsOpen = _g[1];
-    var _h = useState(false), isMobile = _h[0], setIsMobile = _h[1];
-    var _j = useState(initialActiveProposal), expandedProposalIndex = _j[0], setExpandedProposalIndex = _j[1];
+export function Docket(_a) {
+    var proposals = _a.proposals, _b = _a.activeProposal, initialActiveProposal = _b === void 0 ? 0 : _b, onProposalSelect = _a.onProposalSelect, _c = _a.title, title = _c === void 0 ? 'Your quotation' : _c, moreOptions = _a.moreOptions, accordionMoreOptions = _a.accordionMoreOptions, onMoreOptionsClick = _a.onMoreOptionsClick, onAddNewQuoteClick = _a.onAddNewQuoteClick, onCompareClick = _a.onCompareClick, onViewClick = _a.onViewClick, onSaveClick = _a.onSaveClick, onBookNowClick = _a.onBookNowClick, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.containerClassName, containerClassName = _e === void 0 ? '' : _e, onClick = _a.onClick, _f = _a.removeMode, removeMode = _f === void 0 ? false : _f, onServiceRemove = _a.onServiceRemove, _g = _a.doneButtonMode, doneButtonMode = _g === void 0 ? false : _g, onDoneClick = _a.onDoneClick, _h = _a.maxProposals, maxProposals = _h === void 0 ? 5 : _h, emptyStateImageUrl = _a.emptyStateImageUrl, _j = _a.labels, labels = _j === void 0 ? {
+        manageQuotation: 'Manage quotation',
+        close: 'Close',
+        addNewQuote: 'Add new quote',
+        compare: 'Compare',
+        view: 'View',
+        save: 'Save',
+        bookNow: 'Book now',
+        done: 'Done',
+        emptyStateBold: 'Start by adding a service here—',
+        emptyStateRegular: "you'll be able to create and compare multiple quotations.",
+    } : _j;
+    var _k = useState(false), isOpen = _k[0], setIsOpen = _k[1];
+    var _l = useState(false), isMobile = _l[0], setIsMobile = _l[1];
+    var _m = useState(initialActiveProposal), expandedProposalIndex = _m[0], setExpandedProposalIndex = _m[1];
     useEffect(function () {
         var checkMobile = function () {
-            setIsMobile(window.innerWidth < 1024); // Tablet and mobile breakpoint
+            setIsMobile(window.innerWidth < Breakpoint.LG); // Desktop S breakpoint (1440px)
         };
         checkMobile();
         window.addEventListener('resize', checkMobile);
@@ -80,32 +92,40 @@ export var Docket = function (_a) {
     };
     var renderContent = function () {
         if (!proposals || proposals.length === 0) {
-            return _jsx(DocketEmptyState, {});
+            return (_jsx(DocketEmptyState, { imageUrl: emptyStateImageUrl, labels: (labels === null || labels === void 0 ? void 0 : labels.emptyStateBold) != null && (labels === null || labels === void 0 ? void 0 : labels.emptyStateRegular) != null
+                    ? { bold: labels.emptyStateBold, regular: labels.emptyStateRegular }
+                    : undefined }));
         }
         // If there are multiple proposals, render each in a DocketAccordion
         if (proposals.length > 1) {
-            return (_jsx("div", { className: "docket__proposals", children: proposals.map(function (proposal, index) { return (_jsx(DocketAccordion, { proposal: proposal, removeMode: removeMode && index === expandedProposalIndex, onServiceRemove: onServiceRemove, expanded: index === expandedProposalIndex, onExpandedChange: function (isExpanded) { return handleProposalToggle(index, isExpanded); }, moreOptions: accordionMoreOptions }, "proposal-".concat(proposal.ProposalDetail.QuoteId))); }) }));
+            return (_jsx("div", { className: "docket__proposals", children: proposals.map(function (proposal, index) { return (_jsx(DocketAccordion, { proposal: proposal, removeMode: removeMode && index === expandedProposalIndex, onServiceRemove: onServiceRemove, expanded: index === expandedProposalIndex, onExpandedChange: function (isExpanded) { return handleProposalToggle(index, isExpanded); }, moreOptions: accordionMoreOptions, manageQuotationLabel: labels === null || labels === void 0 ? void 0 : labels.manageQuotation, emptyStateImageUrl: emptyStateImageUrl, emptyStateLabels: (labels === null || labels === void 0 ? void 0 : labels.emptyStateBold) != null && (labels === null || labels === void 0 ? void 0 : labels.emptyStateRegular) != null
+                        ? { bold: labels.emptyStateBold, regular: labels.emptyStateRegular }
+                        : undefined }, "proposal-".concat(proposal.ProposalDetail.QuoteId))); }) }));
         }
         // If there's only one proposal, render services directly
         var currentProposal = proposals[0];
         var allServices = currentProposal.Services || [];
         if (allServices.length === 0) {
-            return _jsx(DocketEmptyState, {});
+            return (_jsx(DocketEmptyState, { imageUrl: emptyStateImageUrl, labels: (labels === null || labels === void 0 ? void 0 : labels.emptyStateBold) != null && (labels === null || labels === void 0 ? void 0 : labels.emptyStateRegular) != null
+                    ? { bold: labels.emptyStateBold, regular: labels.emptyStateRegular }
+                    : undefined }));
         }
         var renderedServices = allServices
             .map(function (service, index) { return renderService(service, index); })
             .filter(Boolean);
         if (renderedServices.length === 0) {
-            return _jsx(DocketEmptyState, {});
+            return (_jsx(DocketEmptyState, { imageUrl: emptyStateImageUrl, labels: (labels === null || labels === void 0 ? void 0 : labels.emptyStateBold) != null && (labels === null || labels === void 0 ? void 0 : labels.emptyStateRegular) != null
+                    ? { bold: labels.emptyStateBold, regular: labels.emptyStateRegular }
+                    : undefined }));
         }
         return _jsx("div", { className: "docket__services", children: renderedServices });
     };
     // Collect all prices from the current proposal (only for single proposal view)
     var allPrices = proposals && proposals.length === 1 ? proposals[0].Prices || [] : [];
-    var renderDocketContent = function () { return (_jsxs("div", { className: classes, onClick: onClick, "data-testid": testId, children: [_jsx(DocketHeader, { title: title, moreOptions: moreOptions, onMoreOptionsClick: onMoreOptionsClick }), _jsx("div", { className: "docket__content", children: renderContent() }), allPrices.length > 0 && proposals && proposals.length === 1 && (_jsxs("div", { className: "docket__prices-section", children: [_jsx(Icon, { name: "line", size: "lg" }), _jsx(DocketPrices, { prices: allPrices }), _jsx(Icon, { name: "line", size: "lg" })] })), _jsx(DocketFooter, { onAddNewQuoteClick: onAddNewQuoteClick, onCompareClick: onCompareClick, showCompareButton: !!(proposals === null || proposals === void 0 ? void 0 : proposals.length), onViewClick: onViewClick, onSaveClick: onSaveClick, onBookNowClick: onBookNowClick })] })); };
+    var renderDocketContent = function () { return (_jsxs("div", { className: classes, onClick: onClick, children: [_jsx(DocketHeader, { title: title, moreOptions: moreOptions, onMoreOptionsClick: onMoreOptionsClick }), _jsx("div", { className: "docket__content", children: renderContent() }), allPrices.length > 0 && proposals && proposals.length === 1 && (_jsxs("div", { className: "docket__prices-section", children: [_jsx(Icon, { name: "line", size: "lg" }), _jsx(DocketPrices, { prices: allPrices }), _jsx(Icon, { name: "line", size: "lg" })] })), _jsx(DocketFooter, { onAddNewQuoteClick: onAddNewQuoteClick, onCompareClick: onCompareClick, showCompareButton: !!(proposals === null || proposals === void 0 ? void 0 : proposals.length), onViewClick: onViewClick, onSaveClick: onSaveClick, onBookNowClick: onBookNowClick, doneButtonMode: doneButtonMode, onDoneClick: onDoneClick, labels: labels, disableAddNewQuoteButton: proposals ? proposals.length >= maxProposals : false })] })); };
     var containerClasses = containerClassName
         ? "docket__container ".concat(containerClassName)
         : 'docket__container';
-    return (_jsxs("div", { className: containerClasses, children: [isMobile && !isOpen && (_jsx(DocketCollapsedHeader, { title: title, onClick: handleToggle })), isMobile && isOpen && (_jsxs("div", { className: "docket__mobile-wrapper", children: [_jsx("div", { className: "docket__close-header", children: _jsxs("div", { className: "docket__close-header-content", children: [_jsx("h2", { className: "docket__close-header-text", children: "Close" }), _jsx("button", { className: "docket__close-button", onClick: handleClose, "aria-label": "Close docket", children: _jsx(Icon, { name: "close", size: "lg" }) })] }) }), renderDocketContent()] })), !isMobile && renderDocketContent()] }));
-};
+    return (_jsxs("div", { className: containerClasses, children: [isMobile && !isOpen && (_jsx(DocketCollapsedHeader, { title: title, onClick: handleToggle })), isMobile && isOpen && (_jsxs("div", { className: "docket__mobile-wrapper", children: [_jsx("button", { className: "docket__close-header", onClick: handleClose, children: _jsxs("div", { className: "docket__close-header-content", children: [_jsx("h2", { className: "docket__close-header-text", children: labels === null || labels === void 0 ? void 0 : labels.close }), _jsx("div", { className: "docket__close-button", "aria-label": "Close docket", children: _jsx(Icon, { name: "close", size: "lg" }) })] }) }), renderDocketContent()] })), !isMobile && renderDocketContent()] }));
+}
 export default Docket;

package/dist/components/organisms/Docket/DocketEmptyState.d.ts

@@ -1,12 +1,23 @@
 import React from 'react';
+export type DocketEmptyStateLabelsType = {
+    /** Bold part of the empty state message */
+    bold: string;
+    /** Regular part of the empty state message */
+    regular: string;
+};
 export interface DocketEmptyStateProps {
+    /**
+     * URL of the empty state illustration image
+     */
+    imageUrl?: string;
+    /**
+     * Labels for the empty state text (bold and regular parts)
+     */
+    labels?: DocketEmptyStateLabelsType;
     /**
      * Additional CSS classes
      */
     className?: string;
 }
-/**
- * Empty state component for docket when no content is provided
- */
 export declare const DocketEmptyState: React.FC<DocketEmptyStateProps>;
 export default DocketEmptyState;

package/dist/components/organisms/Docket/DocketEmptyState.js

@@ -2,8 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Empty state component for docket when no content is provided
  */
+var DEFAULT_EMPTY_STATE_IMAGE = '/images/docket-empty-illustration.svg';
+var DEFAULT_EMPTY_STATE_LABELS = {
+    bold: 'Start by adding a service here—',
+    regular: "you'll be able to create and compare multiple quotations.",
+};
 export var DocketEmptyState = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b;
-    return (_jsx("div", { className: "docket__empty-state ".concat(className), children: _jsxs("div", { className: "docket__empty-state-content", children: [_jsx("div", { className: "docket__empty-state-illustration", children: _jsx("img", { src: "/images/docket-empty-illustration.svg", alt: "Empty docket illustration", className: "docket__empty-state-image" }) }), _jsxs("p", { className: "docket__empty-state-text", children: [_jsx("span", { className: "docket__empty-state-text-bold", children: "Start by adding a service here\u2014" }), _jsx("span", { className: "docket__empty-state-text-regular", children: "you'll be able to create and compare multiple quotations." })] })] }) }));
+    var _b = _a.imageUrl, imageUrl = _b === void 0 ? DEFAULT_EMPTY_STATE_IMAGE : _b, _c = _a.labels, labels = _c === void 0 ? DEFAULT_EMPTY_STATE_LABELS : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    return (_jsx("div", { className: "docket__empty-state ".concat(className), children: _jsxs("div", { className: "docket__empty-state-content", children: [_jsx("div", { className: "docket__empty-state-illustration", children: _jsx("img", { src: imageUrl, alt: "Empty docket illustration", className: "docket__empty-state-image" }) }), _jsxs("p", { className: "docket__empty-state-text", children: [_jsx("span", { className: "docket__empty-state-text-bold", children: labels.bold }), _jsx("span", { className: "docket__empty-state-text-regular", children: labels.regular })] })] }) }));
 };
 export default DocketEmptyState;

package/dist/components/organisms/Docket/DocketFooter.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
+export type DocketFooterLabelsType = {
+    addNewQuote: string;
+    compare: string;
+    view: string;
+    save: string;
+    bookNow: string;
+    done: string;
+};
 export interface DocketFooterProps {
     /**
      * Handler for "Add new quote" button click
@@ -28,6 +36,22 @@ export interface DocketFooterProps {
      * Additional CSS classes
      */
     className?: string;
+    /**
+     * Button done mode - replaces the "Book now" button with a "Done" button
+     */
+    doneButtonMode?: boolean;
+    /**
+     * Handler for the "Done" button click
+     */
+    onDoneClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Disable the "Add new quote" button
+     */
+    disableAddNewQuoteButton?: boolean;
+    /**
+     * Labels for the buttons
+     */
+    labels?: DocketFooterLabelsType;
 }
 /**
  * DocketFooter component for action buttons

package/dist/components/organisms/Docket/DocketFooter.js

@@ -1,10 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Button from '../../atoms/Button/Button';
 /**
  * DocketFooter component for action buttons
  */
 export var DocketFooter = function (_a) {
-    var onAddNewQuoteClick = _a.onAddNewQuoteClick, onCompareClick = _a.onCompareClick, _b = _a.showCompareButton, showCompareButton = _b === void 0 ? false : _b, onViewClick = _a.onViewClick, onSaveClick = _a.onSaveClick, onBookNowClick = _a.onBookNowClick, _c = _a.className, className = _c === void 0 ? '' : _c;
-    return (_jsxs("div", { className: "docket__footer ".concat(className), children: [(onAddNewQuoteClick || onCompareClick) && (_jsxs("div", { className: "docket__footer-top-buttons", children: [onAddNewQuoteClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: onAddNewQuoteClick, className: "docket__footer-button ".concat(!showCompareButton ? 'docket__footer-button--full' : ''), children: "Add new quote" })), showCompareButton && onCompareClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: onCompareClick, leadingIcon: "document", className: "docket__footer-button", children: "Compare" }))] })), _jsxs("div", { className: "docket__footer-actions", children: [onViewClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: onViewClick, className: "docket__footer-view-link", children: _jsx("span", { className: "docket__footer-view-text", children: "View" }) })), onSaveClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: onSaveClick, className: "docket__footer-button", children: "Save" })), onBookNowClick && (_jsx(Button, { variant: "secondary", size: "sm", onClick: onBookNowClick, className: "docket__footer-button docket__footer-button--primary", children: "Book now" }))] })] }));
+    var onAddNewQuoteClick = _a.onAddNewQuoteClick, onCompareClick = _a.onCompareClick, _b = _a.showCompareButton, showCompareButton = _b === void 0 ? false : _b, onViewClick = _a.onViewClick, onSaveClick = _a.onSaveClick, onBookNowClick = _a.onBookNowClick, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.doneButtonMode, doneButtonMode = _d === void 0 ? false : _d, onDoneClick = _a.onDoneClick, _e = _a.disableAddNewQuoteButton, disableAddNewQuoteButton = _e === void 0 ? false : _e, _f = _a.labels, labels = _f === void 0 ? {
+        addNewQuote: 'Add new quote',
+        compare: 'Compare',
+        view: 'View',
+        save: 'Save',
+        bookNow: 'Book now',
+        done: 'Done',
+    } : _f;
+    var isDoneMode = doneButtonMode && onDoneClick;
+    return (_jsxs("div", { className: "docket__footer ".concat(className), children: [!isDoneMode && (onAddNewQuoteClick || onCompareClick) && (_jsxs("div", { className: "docket__footer-top-buttons", children: [onAddNewQuoteClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", leadingIcon: disableAddNewQuoteButton ? undefined : 'plus', trailingIcon: disableAddNewQuoteButton ? 'info' : undefined, disabled: disableAddNewQuoteButton, onClick: onAddNewQuoteClick, className: "docket__footer-button ".concat(!showCompareButton ? 'docket__footer-button--full' : ''), children: labels.addNewQuote })), showCompareButton && onCompareClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: onCompareClick, leadingIcon: "document", className: "docket__footer-button", children: labels.compare }))] })), _jsx("div", { className: "docket__footer-actions", children: isDoneMode ? (_jsx(Button, { variant: "secondary", size: "sm", onClick: onDoneClick, className: "docket__footer-button docket__footer-button--primary docket__footer-button--half", children: labels.done })) : (_jsxs(_Fragment, { children: [onViewClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: onViewClick, className: "docket__footer-button", children: _jsx("span", { className: "docket__footer-view-text", children: labels.view }) })), onSaveClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: onSaveClick, className: "docket__footer-button", children: labels.save })), onBookNowClick && (_jsx(Button, { variant: "secondary", size: "sm", onClick: onBookNowClick, className: "docket__footer-button docket__footer-button--primary", children: labels.bookNow }))] })) })] }));
 };
 export default DocketFooter;

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

@@ -1,6 +1,7 @@
 import { ProposalSorted } from '@/src/types/docket/docket.types';
 import { DocketService } from '@/src/types/docket/services.types';
 import { ActionDropdownItem } from '../../molecules/ActionDropdown/ActionDropdown';
+import { type DocketEmptyStateLabelsType } from '../Docket/Docket';
 export interface DocketAccordionProps {
     proposal: ProposalSorted;
     removeMode?: boolean;
@@ -10,6 +11,14 @@ export interface DocketAccordionProps {
     expanded?: boolean;
     onExpandedChange?: (expanded: boolean) => void;
     moreOptions?: ActionDropdownItem[];
+    /**
+     * URL of the empty state illustration image (when the proposal has no services)
+     */
+    emptyStateImageUrl?: string;
+    /**
+     * Labels for the empty state (bold and regular text) when the proposal has no services
+     */
+    emptyStateLabels?: DocketEmptyStateLabelsType;
 }
 /**
  * DocketAccordion component displays a single quotation in an accordion format.
@@ -23,4 +32,4 @@ export interface DocketAccordionProps {
  *   defaultExpanded={false}
  * />
  */
-export default function DocketAccordion({ proposal, removeMode, onServiceRemove, defaultExpanded, expanded, onExpandedChange, moreOptions, manageQuotationLabel, }: DocketAccordionProps): import("react/jsx-runtime").JSX.Element;
+export default function DocketAccordion({ proposal, removeMode, onServiceRemove, defaultExpanded, expanded, onExpandedChange, moreOptions, manageQuotationLabel, emptyStateImageUrl, emptyStateLabels, }: DocketAccordionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/DocketAccordion/DocketAccordion.js

@@ -22,7 +22,7 @@ import { DocketEmptyState } from '../Docket/Docket';
  * />
  */
 export default function DocketAccordion(_a) {
-    var proposal = _a.proposal, _b = _a.removeMode, removeMode = _b === void 0 ? false : _b, onServiceRemove = _a.onServiceRemove, _c = _a.defaultExpanded, defaultExpanded = _c === void 0 ? false : _c, expanded = _a.expanded, onExpandedChange = _a.onExpandedChange, _d = _a.moreOptions, moreOptions = _d === void 0 ? [] : _d, _e = _a.manageQuotationLabel, manageQuotationLabel = _e === void 0 ? 'Manage quotation' : _e;
+    var proposal = _a.proposal, _b = _a.removeMode, removeMode = _b === void 0 ? false : _b, onServiceRemove = _a.onServiceRemove, _c = _a.defaultExpanded, defaultExpanded = _c === void 0 ? false : _c, expanded = _a.expanded, onExpandedChange = _a.onExpandedChange, _d = _a.moreOptions, moreOptions = _d === void 0 ? [] : _d, _e = _a.manageQuotationLabel, manageQuotationLabel = _e === void 0 ? 'Manage quotation' : _e, emptyStateImageUrl = _a.emptyStateImageUrl, emptyStateLabels = _a.emptyStateLabels;
     var allServices = proposal.Services || [];
     var renderAccordionTitle = function (isExpanded) {
         var _a;
@@ -52,5 +52,5 @@ export default function DocketAccordion(_a) {
                                 transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
                                 transition: 'transform 0.2s ease-in-out',
                             } })] })); } }), _jsx(Icon, { name: "line", size: "md" }), _jsx(DocketPrices, { prices: proposal.Prices, className: "docket-accordion__footer-price-list" })] }));
-    return (_jsx(Accordion, { title: proposal.ProposalDetail.Label, renderTitle: renderAccordionTitle, classNameExpanded: "docket-accordion__expanded", defaultExpanded: defaultExpanded, expanded: expanded, onExpandedChange: onExpandedChange, footer: (allServices === null || allServices === void 0 ? void 0 : allServices.length) > 0 ? renderAccordionFooter : undefined, children: _jsx("div", { className: "docket-accordion__content", children: allServices.length === 0 ? (_jsx(DocketEmptyState, {})) : (_jsx("div", { className: "docket-accordion__services", children: allServices.map(function (service, index) { return renderService(service, index); }) })) }) }));
+    return (_jsx(Accordion, { title: proposal.ProposalDetail.Label, renderTitle: renderAccordionTitle, classNameExpanded: "docket-accordion__expanded", defaultExpanded: defaultExpanded, expanded: expanded, onExpandedChange: onExpandedChange, footer: (allServices === null || allServices === void 0 ? void 0 : allServices.length) > 0 ? renderAccordionFooter : undefined, children: _jsx("div", { className: "docket-accordion__content", children: allServices.length === 0 ? (_jsx(DocketEmptyState, { imageUrl: emptyStateImageUrl, labels: emptyStateLabels })) : (_jsx("div", { className: "docket-accordion__services", children: allServices.map(function (service, index) { return renderService(service, index); }) })) }) }));
 }

package/dist/hooks/useMobile.d.ts

@@ -1,7 +1,8 @@
 export declare enum Breakpoint {
     SM = 768,
     MD = 1024,
-    LG = 1280
+    LG = 1280,
+    XL = 1440
 }
 export declare function useMobile(breakpoint?: Breakpoint): {
     isMobile: boolean;

package/dist/hooks/useMobile.js

@@ -4,6 +4,7 @@ export var Breakpoint;
     Breakpoint[Breakpoint["SM"] = 768] = "SM";
     Breakpoint[Breakpoint["MD"] = 1024] = "MD";
     Breakpoint[Breakpoint["LG"] = 1280] = "LG";
+    Breakpoint[Breakpoint["XL"] = 1440] = "XL";
 })(Breakpoint || (Breakpoint = {}));
 export function useMobile(breakpoint) {
     if (breakpoint === void 0) { breakpoint = Breakpoint.SM; }

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

@@ -252,24 +252,6 @@
   width: 100%;
 }
 
-.docket__footer-view-link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--component-button-spacing-ghost-sm-gap, 6px);
-  background: none;
-  border: none;
-  padding: var(--component-button-spacing-ghost-sm-padding-y, 0px)
-    var(--component-button-spacing-ghost-sm-padding-x, 0px);
-  cursor: pointer;
-  font-family: var(--font-font-family-body, 'Satoshi', sans-serif);
-  font-size: var(--font-size-text-sm, 14px);
-  font-weight: var(--font-weight-font-medium, 500);
-  line-height: var(--font-leading-leading-sm, 20px);
-  color: var(--color-button-ghost-foreground-default, #78716c);
-  text-decoration: none;
-  transition: color 0.2s ease;
-}
-
 .docket__footer-view-text {
   display: inline-block;
 }
@@ -300,6 +282,16 @@
   flex: 2;
 }
 
+.docket__footer-actions .docket__footer-button--half {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+.docket__footer-button:disabled {
+  border: var(--button-border-width-outline-default, 1px) solid
+    var(--button-color-outline-secondary-border-disabled, #a3a3a3) !important;
+}
+
 /* Collapsed header for mobile/tablet */
 
 .docket__collapsed-header {
@@ -407,7 +399,7 @@
 
 /* Responsive behavior */
 
-@media (max-width: 1023px) {
+@media (max-width: 1439px) {
   .docket {
     width: 384px;
   }
@@ -451,7 +443,9 @@
   }
 }
 
-@media (min-width: 1024px) {
+/* Desktop and up */
+
+@media (min-width: 1440px) {
   .docket__collapsed-header,
   .docket__close-header {
     display: none;

package/package.json

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