mautourco-components 0.1.1

package/dist/components/atoms/Typography/Typography.js

@@ -0,0 +1,100 @@
+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 headingTokenClass = {
+    1: 'heading-3xl',
+    2: 'heading-2xl',
+    3: 'heading-xl',
+    4: 'heading-lg',
+    5: 'heading-md',
+    6: 'heading-sm',
+};
+var leadingFallback = {
+    none: 'leading-none',
+    '4': 'leading-4',
+    '5': 'leading-5',
+    '6': 'leading-6',
+    '7': 'leading-7',
+};
+var bodySizeAlias = {
+    xs: 'xs',
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+    base: 'md',
+    xl: 'lg',
+};
+var defaultBodyLeading = {
+    xs: '5',
+    sm: '6',
+    md: '6',
+    lg: '7',
+};
+var tokenBodyLeadings = {
+    xs: ['leading-5', 'leading-4', 'leading-none'],
+    sm: ['leading-6', 'leading-5', 'leading-none'],
+    md: ['leading-6', 'leading-7', 'leading-none'],
+    lg: ['leading-7', 'leading-6', 'leading-none'],
+};
+var mapLeadingToToken = function (leading) {
+    if (leading === 'none')
+        return 'leading-none';
+    return "leading-".concat(leading);
+};
+var getBodyClass = function (size, leading) {
+    var availableLeadings = tokenBodyLeadings[size];
+    var desiredLeading = leading ? mapLeadingToToken(leading) : mapLeadingToToken(defaultBodyLeading[size]);
+    var resolvedLeading = availableLeadings.includes(desiredLeading)
+        ? desiredLeading
+        : availableLeadings[0];
+    return {
+        className: "body-".concat(size, "-").concat(resolvedLeading),
+        lineHeightHandled: desiredLeading === resolvedLeading,
+    };
+};
+var buildVariantClass = function (base, variant) {
+    if (!base)
+        return undefined;
+    return "".concat(base, "--").concat(variant);
+};
+export var Heading = function (_a) {
+    var _b;
+    var _c = _a.level, level = _c === void 0 ? 2 : _c, _d = _a.variant, variant = _d === void 0 ? 'bold' : _d, leading = _a.leading, as = _a.as, _e = _a.className, className = _e === void 0 ? '' : _e, children = _a.children, onClick = _a.onClick;
+    var Tag = as || "h".concat(level);
+    var baseClass = (_b = headingTokenClass[level]) !== null && _b !== void 0 ? _b : headingTokenClass[2];
+    var variantClass = buildVariantClass(baseClass, variant);
+    var classes = [
+        baseClass,
+        variantClass,
+        leading ? leadingFallback[leading] : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(Tag, __assign({ className: classes, onClick: onClick }, { children: children })));
+};
+export var Text = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.variant, variant = _c === void 0 ? 'regular' : _c, leading = _a.leading, as = _a.as, _d = _a.className, className = _d === void 0 ? '' : _d, children = _a.children, onClick = _a.onClick;
+    var Tag = as || 'p';
+    var normalizedSize = bodySizeAlias[size];
+    var _e = getBodyClass(normalizedSize, leading), baseClass = _e.className, lineHeightHandled = _e.lineHeightHandled;
+    var variantClass = buildVariantClass(baseClass, variant);
+    var classes = [
+        baseClass,
+        variantClass,
+        leading && !lineHeightHandled ? leadingFallback[leading] : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(Tag, __assign({ className: classes, onClick: onClick }, { children: children })));
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+export interface MultiSelectOption {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    imageUrl?: string;
+}
+export interface MultiSelectGroup {
+    id: string;
+    label: string;
+    options: MultiSelectOption[];
+    imageUrl?: string;
+}
+export interface MultiSelectDropdownProps {
+    options: MultiSelectOption[];
+    selectedValues: string[];
+    placeholder?: string;
+    onSelectionChange: (selectedIds: string[]) => void;
+    disabled?: boolean;
+    error?: boolean;
+    className?: string;
+    maxDisplayedChips?: number;
+    selectedValueVariant?: 'filled' | 'text';
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    groups?: MultiSelectGroup[];
+}
+declare const MultiSelectDropdown: React.FC<MultiSelectDropdownProps>;
+export default MultiSelectDropdown;

package/dist/components/molecules/MultiSelectDropdown/MultiSelectDropdown.js

@@ -0,0 +1,106 @@
+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);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
+import Input from '../../atoms/Inputs/Input/Input';
+import Checkbox from '../../atoms/Checkbox/Checkbox';
+import SelectedValue from '../../atoms/SelectedValue/SelectedValue';
+import { Text } from '../../atoms/Typography/Typography';
+var MultiSelectDropdown = function (_a) {
+    var options = _a.options, selectedValues = _a.selectedValues, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select items' : _b, onSelectionChange = _a.onSelectionChange, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.maxDisplayedChips, maxDisplayedChips = _f === void 0 ? 3 : _f, _g = _a.selectedValueVariant, selectedValueVariant = _g === void 0 ? 'filled' : _g, _h = _a.searchable, searchable = _h === void 0 ? false : _h, _j = _a.searchPlaceholder, searchPlaceholder = _j === void 0 ? 'Search' : _j, groups = _a.groups;
+    var _k = useState(false), isOpen = _k[0], setIsOpen = _k[1];
+    var _l = useState(''), query = _l[0], setQuery = _l[1];
+    var dropdownRef = useRef(null);
+    // Close dropdown when clicking outside
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    var handleToggleDropdown = function () {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    var handleOptionToggle = function (optionId) {
+        if (disabled)
+            return;
+        var isSelected = selectedValues.includes(optionId);
+        var newSelectedValues;
+        if (isSelected) {
+            newSelectedValues = selectedValues.filter(function (id) { return id !== optionId; });
+        }
+        else {
+            newSelectedValues = __spreadArray(__spreadArray([], selectedValues, true), [optionId], false);
+        }
+        onSelectionChange(newSelectedValues);
+    };
+    var handleRemoveChip = function (optionId) {
+        if (disabled)
+            return;
+        var newSelectedValues = selectedValues.filter(function (id) { return id !== optionId; });
+        onSelectionChange(newSelectedValues);
+    };
+    var getSelectedOptions = function () {
+        return options.filter(function (option) { return selectedValues.includes(option.id); });
+    };
+    var getFilteredOptions = function () {
+        if (!searchable || query.trim() === '')
+            return options;
+        var q = query.toLowerCase();
+        return options.filter(function (o) { return o.label.toLowerCase().includes(q); });
+    };
+    var getDisplayedChips = function () {
+        var selectedOptions = getSelectedOptions();
+        return selectedOptions.slice(0, maxDisplayedChips);
+    };
+    var getHiddenCount = function () {
+        return Math.max(0, selectedValues.length - maxDisplayedChips);
+    };
+    var getDropdownState = function () {
+        if (disabled)
+            return 'disabled';
+        if (error)
+            return 'error';
+        if (selectedValues.length > 0)
+            return 'selected';
+        return 'default';
+    };
+    return (_jsxs("div", __assign({ ref: dropdownRef, className: "multiselect-dropdown ".concat(className) }, { children: [_jsxs("div", __assign({ className: "multiselect-dropdown__input-container" }, { children: [_jsx(DropdownInput, { placeholder: selectedValues.length === 0 ? placeholder : '', state: getDropdownState(), onClick: handleToggleDropdown, className: "multiselect-dropdown__input" }), selectedValues.length > 0 && (_jsxs("div", __assign({ className: "multiselect-dropdown__chips" }, { children: [getDisplayedChips().map(function (option) { return (_jsx(SelectedValue, { value: option.label, onRemove: function () { return handleRemoveChip(option.id); }, className: "multiselect-dropdown__chip", size: "xs", iconSize: "xs", variant: selectedValueVariant }, option.id)); }), getHiddenCount() > 0 && (_jsxs("div", __assign({ className: "multiselect-dropdown__hidden-count" }, { children: ["+", getHiddenCount()] })))] })))] })), isOpen && (_jsxs("div", __assign({ className: "multiselect-dropdown__panel" }, { children: [_jsxs("div", __assign({ className: "multiselect-dropdown__menu" }, { children: [searchable && (_jsx("div", __assign({ className: "multiselect-dropdown__search" }, { children: _jsx(Input, { placeholder: searchPlaceholder, value: query, onChange: function (e) { return setQuery(e.target.value); }, icon: "search", iconPosition: "trailing" }) }))), _jsx("div", __assign({ className: "multiselect-dropdown__options" }, { children: groups && groups.length > 0 ? (groups.map(function (group) { return (_jsxs("div", __assign({ className: "multiselect-dropdown__group" }, { children: [_jsxs("div", __assign({ className: "multiselect-dropdown__group-header" }, { children: [group.imageUrl && (_jsx("span", __assign({ className: "multiselect-dropdown__group-icon", "aria-hidden": "true" }, { children: _jsx("img", { src: group.imageUrl, alt: "" }) }))), _jsx(Text, __assign({ size: "sm", variant: "medium" }, { children: group.label }))] })), _jsx("div", __assign({ className: "multiselect-dropdown__group-options" }, { children: getFilteredOptions()
+                                                .filter(function (o) { return group.options.some(function (go) { return go.id === o.id; }); })
+                                                .map(function (option) { return (_jsx("div", __assign({ className: "multiselect-dropdown__option" }, { children: _jsx(Checkbox, { checked: selectedValues.includes(option.id), disabled: option.disabled || disabled, label: option.label, leadingContent: option.imageUrl ? (_jsx("span", __assign({ className: "multiselect-dropdown__option-icon", "aria-hidden": "true" }, { children: _jsx("img", { src: option.imageUrl, alt: "" }) }))) : undefined, onChange: function (checked) {
+                                                        if (checked !== selectedValues.includes(option.id)) {
+                                                            handleOptionToggle(option.id);
+                                                        }
+                                                    } }) }), option.id)); }) }))] }), group.id)); })) : (getFilteredOptions().map(function (option) { return (_jsx("div", __assign({ className: "multiselect-dropdown__option" }, { children: _jsx(Checkbox, { checked: selectedValues.includes(option.id), disabled: option.disabled || disabled, label: option.label, leadingContent: option.imageUrl ? (_jsx("span", __assign({ className: "multiselect-dropdown__option-icon", "aria-hidden": "true" }, { children: _jsx("img", { src: option.imageUrl, alt: "" }) }))) : undefined, onChange: function (checked) {
+                                            if (checked !== selectedValues.includes(option.id)) {
+                                                handleOptionToggle(option.id);
+                                            }
+                                        } }) }), option.id)); })) }))] })), _jsx("div", __assign({ className: "multiselect-dropdown__footer" }, { children: _jsxs(Text, __assign({ size: "sm", variant: "regular", leading: "5", className: "multiselect-dropdown__footer-text" }, { children: [selectedValues.length, " item selected"] })) }))] })))] })));
+};
+export default MultiSelectDropdown;

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

@@ -0,0 +1,20 @@
+import React from "react";
+type User = {
+    name: string;
+    agency: string;
+    isAdmin: boolean;
+};
+type Agency = {
+    id: number;
+    name: string;
+    localisation: string;
+};
+export interface UserCardProps {
+    user: User;
+    agencies: Agency[];
+    onSelectAgency?: (agency: Agency) => void;
+    selectedAgency?: Agency;
+    className?: string;
+}
+export declare const UserCard: React.FC<UserCardProps>;
+export {};

package/dist/components/molecules/UserCard/UserCard.js

@@ -0,0 +1,57 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Avatar } from "../../atoms/Avatar/Avatar";
+export var UserCard = function (_a) {
+    var user = _a.user, agencies = _a.agencies, onSelectAgency = _a.onSelectAgency, selectedAgency = _a.selectedAgency, _b = _a.className, className = _b === void 0 ? "" : _b;
+    var _c = useState(false), open = _c[0], setOpen = _c[1];
+    var _d = useState(""), query = _d[0], setQuery = _d[1];
+    var rootRef = useRef(null);
+    var searchRef = useRef(null);
+    // Close dropdown on outside click
+    useEffect(function () {
+        if (!user.isAdmin || !open)
+            return;
+        var handleClickOutside = function (e) {
+            var _a;
+            if (!((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return function () { return document.removeEventListener("mousedown", handleClickOutside); };
+    }, [open, user.isAdmin]);
+    // Auto-focus search input when dropdown opens
+    useEffect(function () {
+        if (user.isAdmin && open)
+            setTimeout(function () { var _a; return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, [open, user.isAdmin]);
+    // Filter agencies based on query
+    var filteredAgencies = useMemo(function () {
+        var q = query.trim().toLowerCase();
+        if (!q)
+            return agencies;
+        return agencies.filter(function (a) {
+            return a.name.toLowerCase().includes(q) ||
+                a.localisation.toLowerCase().includes(q);
+        });
+    }, [agencies, query]);
+    var handleSelect = function (a) {
+        onSelectAgency === null || onSelectAgency === void 0 ? void 0 : onSelectAgency(a);
+        setOpen(false);
+        setQuery("");
+    };
+    return (_jsxs("div", __assign({ ref: rootRef, className: "relative inline-flex items-center gap-3 ".concat(className, " ").concat(user.isAdmin ? "cursor-pointer rounded-[11px] border border-[#D9D9D9] bg-white px-[13px] py-2" : "") }, { children: [_jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [_jsx(Avatar, { name: user.name, size: "md", shape: "circle" }), _jsxs("div", __assign({ className: "flex flex-col leading-tight" }, { children: [_jsxs("div", __assign({ className: "text-[13px] text-muted-foreground" }, { children: ["Welcome back,", " ", _jsx("span", __assign({ className: "font-medium text-foreground" }, { children: user.name })), " ", _jsx("span", __assign({ "aria-hidden": true }, { children: "\uD83D\uDC4B" }))] })), _jsx("div", __assign({ className: "text-[13px] font-semibold text-foreground" }, { children: selectedAgency ? selectedAgency.name : user.agency }))] }))] })), user.isAdmin && (_jsxs(_Fragment, { children: [_jsx("button", __assign({ type: "button", "aria-expanded": open, "aria-haspopup": "listbox", onClick: function () { return setOpen(function (v) { return !v; }); }, className: "inline-flex h-8 w-8 items-center justify-center rounded-lg bg-teal-600 text-white shadow-[0_2px_6px_rgba(0,0,0,0.15)] outline-none focus-visible:ring-2 focus-visible:ring-teal-300", title: "Open agency selector" }, { children: _jsx("svg", __assign({ width: "18", height: "18", viewBox: "0 0 24 24", "aria-hidden": "true", className: "transition-transform ".concat(open ? "rotate-180" : "") }, { children: _jsx("path", { d: "M6 9l6 6 6-6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })), open && (_jsxs("div", __assign({ className: "absolute right-0 top-12 z-50 w-[340px] rounded-2xl border border-black/5 bg-white p-3 shadow-[0_12px_30px_rgba(0,0,0,0.15)]" }, { children: [_jsxs("div", __assign({ className: "relative mb-3" }, { children: [_jsx("input", { ref: searchRef, value: query, onChange: function (e) { return setQuery(e.target.value); }, placeholder: "Search", className: "w-full rounded-xl border border-black/10 bg-white px-10 py-2 text-sm outline-none focus:border-black/20 shadow-[inset_0_1px_2px_rgba(0,0,0,0.06)]" }), _jsx("div", __assign({ className: "absolute -translate-y-1/2 pointer-events-none left-3 top-1/2" }, { children: _jsx("svg", __assign({ width: "18", height: "18", viewBox: "0 0 24 24" }, { children: _jsx("path", { d: "M21 21l-4.3-4.3M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) })) }))] })), _jsxs("ul", __assign({ role: "listbox", className: "pr-1 overflow-auto max-h-64" }, { children: [filteredAgencies.map(function (a) {
+                                        var isActive = (selectedAgency === null || selectedAgency === void 0 ? void 0 : selectedAgency.id) === a.id;
+                                        return (_jsx("li", { children: _jsxs("button", __assign({ type: "button", onClick: function () { return handleSelect(a); }, className: "flex w-full items-center justify-between gap-3 rounded-lg px-2 py-2 text-left hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-300 ".concat(isActive ? "bg-black/[0.04]" : ""), "aria-selected": isActive, role: "option" }, { children: [_jsx("span", __assign({ className: "text-[14px]" }, { children: a.name })), _jsx("span", __assign({ className: "text-[13px] font-semibold" }, { children: a.localisation }))] })) }, a.id));
+                                    }), filteredAgencies.length === 0 && (_jsx("li", __assign({ className: "px-2 py-6 text-sm text-center text-muted-foreground" }, { children: "No results" })))] }))] })))] }))] })));
+};

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

@@ -0,0 +1,38 @@
+import React from "react";
+type FooterLink = {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+};
+type FooterColumn = {
+    id: string;
+    title: string;
+    links: FooterLink[];
+};
+type SocialLink = {
+    id: string;
+    icon: React.ReactNode;
+    label: string;
+    href: string;
+};
+type ContactBlock = {
+    title: string;
+    addressLines: string[];
+    phone?: string;
+    fax?: string;
+    email?: string;
+};
+export interface FooterProps {
+    logo?: React.ReactNode;
+    columns?: FooterColumn[];
+    contact?: ContactBlock;
+    socials?: SocialLink[];
+    className?: string;
+    homeUrl?: string;
+    onLinkClick?: (link: {
+        label: string;
+        route: string;
+    }) => void;
+}
+export declare const Footer: React.FC<FooterProps>;
+export {};

package/dist/components/organisms/Footer/Footer.js

@@ -0,0 +1,74 @@
+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 { useState } from "react";
+import { Text } from "../../atoms/Typography/Typography";
+import { Link } from "../../atoms/Link/Link";
+import Icon from "../../atoms/Icon/Icon";
+export var Footer = function (_a) {
+    var _b;
+    var logo = _a.logo, _c = _a.columns, columns = _c === void 0 ? defaultColumns : _c, _d = _a.contact, contact = _d === void 0 ? defaultContact : _d, _e = _a.socials, socials = _e === void 0 ? defaultSocials : _e, _f = _a.className, className = _f === void 0 ? "" : _f, homeUrl = _a.homeUrl, onLinkClick = _a.onLinkClick;
+    var _g = useState((_b = columns[0]) === null || _b === void 0 ? void 0 : _b.id), openSection = _g[0], setOpenSection = _g[1];
+    var toggleSection = function (id) {
+        setOpenSection(function (prev) { return (prev === id ? null : id); });
+    };
+    var year = new Date().getFullYear();
+    return (_jsx("footer", __assign({ className: "footer" }, { children: _jsxs("div", __assign({ className: "footer__wrapper" }, { children: [_jsxs("div", __assign({ className: "footer__desktop" }, { children: [_jsxs("div", __assign({ className: "footer__top-row" }, { children: [_jsxs("div", __assign({ className: "footer__content-left" }, { children: [columns.map(function (col) { return (_jsxs("div", __assign({ className: "footer__column" }, { children: [_jsx(Text, __assign({ as: "h4", className: "footer__column-title" }, { children: col.title })), _jsx("div", __assign({ className: "footer__column-links" }, { children: col.links.map(function (link) { return (_jsx(Link, __assign({ href: link.href, onClick: link.onClick, theme: "dark", className: "text-xs no-underline hover:opacity-80" }, { children: link.label }), link.label)); }) }))] }), col.id)); }), _jsxs("div", __assign({ className: "footer__contact" }, { children: [_jsx(Text, __assign({ as: "h4", className: "footer__column-title" }, { children: contact.title })), _jsxs("div", __assign({ className: "footer__contact-info" }, { children: [contact.addressLines.map(function (line) { return (_jsx("p", { children: line }, line)); }), contact.phone && _jsxs("p", { children: ["Tel: ", contact.phone] }), contact.fax && _jsxs("p", { children: ["Fax: ", contact.fax] }), contact.email && (_jsx(Link, __assign({ href: "mailto:".concat(contact.email), theme: "dark", className: "text-xs no-underline" }, { children: contact.email })))] }))] })), _jsxs("div", __assign({ className: "footer__socials" }, { children: [_jsx(Text, __assign({ as: "h4", className: "footer__column-title" }, { children: "Socials" })), _jsx("div", __assign({ className: "footer__socials-icons" }, { children: socials.map(function (s) { return (_jsx("a", __assign({ href: s.href, "aria-label": s.label, className: "footer__social-link" }, { children: s.icon }), s.id)); }) }))] }))] })), logo && (_jsx("div", __assign({ className: "footer__logo-section" }, { children: _jsxs("div", __assign({ className: "footer__logo-container" }, { children: [_jsx("a", __assign({ href: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/", onClick: function (e) {
+                                                    e.preventDefault();
+                                                    onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label: "Home", route: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/" });
+                                                } }, { children: logo })), _jsxs(Text, __assign({ as: "p", className: "footer__copyright" }, { children: ["\u00A9 ", year, " Mautourco, All Rights Reserved"] }))] })) })))] })), !logo && (_jsxs(Text, __assign({ as: "p", className: "footer__copyright-standalone" }, { children: ["\u00A9 ", year, " Mautourco, All Rights Reserved"] })))] })), _jsxs("div", __assign({ className: "footer__mobile" }, { children: [columns.map(function (col) { return (_jsxs("div", __assign({ className: "footer__mobile-section" }, { children: [_jsxs("button", __assign({ type: "button", onClick: function () { return toggleSection(col.id); }, className: "footer__mobile-section-button" }, { children: [_jsx("span", { children: col.title }), _jsx("span", __assign({ className: "footer__mobile-section-icon ".concat(openSection === col.id ? "footer__mobile-section-icon--rotated" : "") }, { children: _jsx(Icon, { name: "chevron-down", size: "sm", color: "white" }) }))] })), openSection === col.id && (_jsx("div", __assign({ className: "footer__mobile-section-content" }, { children: col.links.map(function (link) { return (_jsx(Link, __assign({ href: link.href, onClick: link.onClick, theme: "dark", className: "text-xs no-underline" }, { children: link.label }), link.label)); }) })))] }), col.id)); }), _jsxs("div", __assign({ className: "footer__mobile-contact" }, { children: [_jsx(Text, __assign({ as: "h4", className: "footer__mobile-contact-title" }, { children: contact.title })), _jsxs("div", __assign({ className: "footer__mobile-contact-info" }, { children: [contact.addressLines.map(function (line) { return (_jsx("p", { children: line }, line)); }), contact.phone && _jsxs("p", { children: ["Tel: ", contact.phone] }), contact.fax && _jsxs("p", { children: ["Fax: ", contact.fax] }), contact.email && (_jsx(Link, __assign({ href: "mailto:".concat(contact.email), theme: "dark", className: "text-xs no-underline" }, { children: contact.email })))] }))] })), _jsxs("div", __assign({ className: "footer__mobile-footer" }, { children: [_jsx("a", __assign({ href: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/", onClick: function (e) {
+                                        e.preventDefault();
+                                        onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label: "Home", route: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/" });
+                                    } }, { children: logo })), _jsxs(Text, __assign({ as: "p", className: "footer__mobile-copyright" }, { children: ["\u00A9 ", year, " Mautourco, All Rights Reserved"] }))] }))] }))] })) })));
+};
+var defaultColumns = [
+    {
+        id: "menu-1",
+        title: "Menu Title",
+        links: [
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+        ],
+    },
+    {
+        id: "menu-2",
+        title: "Menu Title",
+        links: [
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+        ],
+    },
+];
+var defaultContact = {
+    title: "Contact Us",
+    addressLines: [
+        "84, Gustave Colin Street,",
+        "Forest Side 74414, Mauritius",
+    ],
+    phone: "+ (230) 604 3000",
+    fax: "+ (230) 674 3720",
+    email: "info@mautourco.com",
+};
+var defaultSocials = [
+    { id: "fb", label: "Facebook", href: "#", icon: _jsx("span", { children: "\uF09A" }) },
+    { id: "ig", label: "Instagram", href: "#", icon: _jsx("span", { children: "\uF16D" }) },
+    { id: "in", label: "LinkedIn", href: "#", icon: _jsx("span", { children: "\uF0E1" }) },
+    { id: "yt", label: "YouTube", href: "#", icon: _jsx("span", { children: "\uF167" }) },
+];

package/dist/components/organisms/TopNavigation/DesktopNav.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+type Link = {
+    label: string;
+    route: string;
+    isButton?: boolean;
+    disabled?: boolean;
+};
+type User = {
+    name: string;
+    agency: string;
+    isAdmin: boolean;
+};
+type Agency = {
+    id: number;
+    name: string;
+    localisation: string;
+};
+export interface DesktopNavProps {
+    links: Link[];
+    onLinkClick?: (link: Link) => void;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    user?: User;
+    active?: string;
+    logoUrl: string | React.FC<React.SVGProps<SVGSVGElement>>;
+    homeUrl?: string;
+    selectedAgency?: Agency;
+    onAgencyChange?: (agency: Agency) => void;
+    agencies?: Agency[];
+    className?: string;
+}
+export declare const DesktopNav: React.FC<DesktopNavProps>;
+export {};

package/dist/components/organisms/TopNavigation/DesktopNav.js

@@ -0,0 +1,26 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "../../atoms/Button/Button";
+import { UserCard } from "../../molecules/UserCard/UserCard";
+export var DesktopNav = function (_a) {
+    var links = _a.links, onLinkClick = _a.onLinkClick, onLogin = _a.onLogin, onLogout = _a.onLogout, user = _a.user, active = _a.active, logoUrl = _a.logoUrl, homeUrl = _a.homeUrl, selectedAgency = _a.selectedAgency, onAgencyChange = _a.onAgencyChange, agencies = _a.agencies, _b = _a.className, className = _b === void 0 ? "" : _b;
+    var Logo = typeof logoUrl === "function" ? logoUrl : null;
+    var handleLogoClick = function (e) {
+        e.preventDefault();
+        onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label: "Home", route: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/" });
+    };
+    return (_jsxs("header", __assign({ className: "header" }, { children: [_jsx("div", __assign({ className: "header-logo" }, { children: _jsx("a", __assign({ href: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/", onClick: handleLogoClick, className: "header-logo__link" }, { children: Logo ? (_jsx(Logo, { className: "header-logo__image" })) : (_jsx("img", { src: logoUrl, alt: "Mautourco", className: "header-logo__image", draggable: false })) })) })), _jsxs("nav", __assign({ className: "header-nav" }, { children: [_jsx("ul", __assign({ className: "header-nav__items" }, { children: links === null || links === void 0 ? void 0 : links.map(function (it) {
+                            var isActive = it.label === active;
+                            return (_jsx("li", __assign({ className: "header__item ".concat(isActive ? "header__item--active" : "") }, { children: _jsx("a", __assign({ href: it.route, className: "header__item__link" }, { children: it.isButton ? (_jsx(Button, __assign({ size: "sm", variant: "outline-secondary" }, { children: it.label }))) : (_jsx(_Fragment, { children: it.label })) })) }), it.label));
+                        }) })), _jsx("div", __assign({ className: "header-nav__user-section ".concat(user ? "header-nav__user-connected-section" : "") }, { children: user ? (_jsx("div", __assign({ className: "header-nav__user-container" }, { children: _jsx(UserCard, { user: user, agencies: agencies || [], selectedAgency: selectedAgency, onSelectAgency: onAgencyChange }) }))) : (_jsx(Button, __assign({ size: "sm", variant: "secondary", onClick: onLogin }, { children: "Login" }))) }))] }))] })));
+};

package/dist/components/organisms/TopNavigation/MobileNav.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+type Link = {
+    label: string;
+    route: string;
+    isButton?: boolean;
+    disabled?: boolean;
+};
+type User = {
+    name: string;
+    agency: string;
+    isAdmin: boolean;
+};
+type Agency = {
+    id: number;
+    name: string;
+    localisation: string;
+};
+export interface MobileNavProps {
+    links: Link[];
+    onLinkClick?: (link: Link) => void;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    user?: User;
+    active?: string;
+    logoUrl: string | React.FC<React.SVGProps<SVGSVGElement>>;
+    selectedAgency?: Agency;
+    onAgencyChange?: (agency: Agency) => void;
+    agencies?: Agency[];
+    homeUrl?: string;
+}
+export declare const MobileNav: React.FC<MobileNavProps>;
+export default MobileNav;

package/dist/components/organisms/TopNavigation/MobileNav.js

@@ -0,0 +1,45 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import Icon from "../../atoms/Icon/Icon";
+import Button from "../../atoms/Button/Button";
+import { UserCard } from "../../molecules/UserCard/UserCard";
+export var MobileNav = function (_a) {
+    var links = _a.links, onLinkClick = _a.onLinkClick, onLogin = _a.onLogin, onLogout = _a.onLogout, user = _a.user, active = _a.active, logoUrl = _a.logoUrl, selectedAgency = _a.selectedAgency, onAgencyChange = _a.onAgencyChange, agencies = _a.agencies, homeUrl = _a.homeUrl;
+    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
+    var closeRef = React.useRef(null);
+    var Logo = typeof logoUrl === "function" ? logoUrl : null;
+    return (_jsxs(_Fragment, { children: [_jsxs("header", __assign({ className: "header" }, { children: [_jsx("button", __assign({ "aria-label": "Open Menu", onClick: function () { return setOpen(true); } }, { children: _jsx(Icon, { name: "menu", size: "sm" }) })), _jsx("div", __assign({ className: "header-logo" }, { children: _jsx("a", __assign({ href: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/", className: "header-logo__link", onClick: function (e) {
+                                e.preventDefault();
+                                onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label: "Home", route: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/" });
+                            } }, { children: Logo ? (_jsx(Logo, { className: "header-logo__image" })) : (_jsx("img", { src: logoUrl, alt: "Mautourco", className: "header-logo__image", draggable: false })) })) })), _jsx("div", __assign({ className: "header-user-actions" }, { children: !user && (_jsx(Button, __assign({ size: "sm", variant: "secondary", onClick: function () {
+                                onLogin === null || onLogin === void 0 ? void 0 : onLogin();
+                                setOpen(false);
+                            } }, { children: "Login" }))) }))] })), _jsx("div", { "aria-hidden": !open, className: "mobile-nav__backdrop ".concat(open ? "mobile-nav__backdrop--open" : "mobile-nav__backdrop--closed"), onClick: function () { return setOpen(false); } }), _jsxs("aside", __assign({ role: "dialog", "aria-modal": "true", "aria-label": "Main menu", className: "\n          mobile-nav__sheet\n          ".concat(open ? "mobile-nav__sheet--open" : "mobile-nav__sheet--closed", "\n        ") }, { children: [_jsxs("div", __assign({ className: "mobile-nav__header" }, { children: [_jsx("div", { children: _jsx("button", __assign({ ref: closeRef, "aria-label": "Close menu", onClick: function () { return setOpen(false); }, className: "mobile-nav__close-button" }, { children: _jsx(Icon, { name: "close", size: "sm" }) })) }), user ? (_jsx(UserCard, { user: user, agencies: agencies || [], selectedAgency: selectedAgency, onSelectAgency: onAgencyChange })) : (_jsx("a", __assign({ href: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/", className: "header-logo__link", onClick: function (e) {
+                                    e.preventDefault();
+                                    onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label: "Home", route: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/" });
+                                } }, { children: Logo ? (_jsx(Logo, { className: "header-logo__image-mobile" })) : (_jsx("img", { src: logoUrl, alt: "Mautourco", className: "header-logo__image-mobile", draggable: false })) })))] })), _jsx("nav", __assign({ className: "mobile-nav__content" }, { children: _jsx("ul", __assign({ className: "mobile-nav__list" }, { children: links.map(function (l, i) {
+                                var activeItem = active && active === l.label;
+                                return (_jsx("li", __assign({ className: "header__item ".concat(activeItem ? "header__item--active" : "") }, { children: _jsx("button", __assign({ disabled: l.disabled, onClick: function () {
+                                            onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick(l);
+                                            setOpen(false);
+                                        }, className: "mobile-nav__item-button" }, { children: l.label })) }), "".concat(l.route, "-").concat(i)));
+                            }) })) })), _jsx("div", __assign({ className: "mobile-nav__footer" }, { children: user ? (_jsx("div", __assign({ className: "mobile-nav__user-info" }, { children: _jsx(Button, __assign({ onClick: function () {
+                                    onLogout === null || onLogout === void 0 ? void 0 : onLogout();
+                                    setOpen(false);
+                                }, className: "mobile-nav__logout-button" }, { children: "Logout" })) }))) : (_jsx(Button, __assign({ size: "sm", variant: "secondary", onClick: function () {
+                                onLogin === null || onLogin === void 0 ? void 0 : onLogin();
+                                setOpen(false);
+                            } }, { children: "Login" }))) }))] }))] }));
+};
+export default MobileNav;

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

@@ -0,0 +1,33 @@
+import React from "react";
+type Link = {
+    label: string;
+    route: string;
+    isButton?: boolean;
+    disabled?: boolean;
+};
+type User = {
+    name: string;
+    agency: string;
+    isAdmin: boolean;
+};
+type Agency = {
+    id: number;
+    name: string;
+    localisation: string;
+};
+export interface TopNavigationProps {
+    links: Link[];
+    onLinkClick?: (link: Link) => void;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    user?: User;
+    active?: string;
+    logoUrl: string | React.FC<React.SVGProps<SVGSVGElement>>;
+    homeUrl?: string;
+    selectedAgency?: Agency;
+    onAgencyChange?: (agency: Agency) => void;
+    agencies?: Agency[];
+    className?: string;
+}
+export declare const TopNavigation: React.FC<TopNavigationProps>;
+export {};

package/dist/components/organisms/TopNavigation/TopNavigation.js

@@ -0,0 +1,20 @@
+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 { useMobile } from "../../../hooks/useMobile";
+import MobileNav from "./MobileNav";
+import { DesktopNav } from "./DesktopNav";
+export var TopNavigation = function (props) {
+    var _a = useMobile(), isMobile = _a.isMobile, isTablet = _a.isTablet;
+    var isSmallScreen = isMobile || isTablet;
+    return isSmallScreen ? _jsx(MobileNav, __assign({}, props)) : _jsx(DesktopNav, __assign({}, props));
+};