mautourco-components 0.1.1

package/src/components/organisms/TopNavigation/MobileNav.tsx

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

package/src/components/organisms/TopNavigation/TopNavigation.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { useMobile } from "../../../hooks/useMobile";
+import MobileNav from "./MobileNav";
+import { DesktopNav } from "./DesktopNav";
+
+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 const TopNavigation: React.FC<TopNavigationProps> = (props) => {
+  const { isMobile, isTablet } = useMobile();
+  const isSmallScreen = isMobile || isTablet;
+
+  return isSmallScreen ? <MobileNav {...props} /> : <DesktopNav {...props} />;
+};

package/src/styles/components/avatar.css

@@ -0,0 +1,58 @@
+.avatar {
+	@apply relative inline-flex items-center justify-center overflow-hidden select-none;
+}
+
+.avatar--sm {
+	@apply w-4 h-4 text-[10px];
+}
+
+.avatar--md {
+	@apply w-6 h-6 text-[11px];
+}
+
+.avatar--lg {
+	@apply w-8 h-8 text-xs;
+}
+
+.avatar--xl {
+	@apply w-12 h-12 text-sm;
+}
+
+.avatar--circle {
+	@apply rounded-full;
+}
+
+.avatar--rounded {
+	border-radius: var(--avatar-corner-radius-square, 6px);
+}
+
+.avatar--gray {
+	@apply bg-slate-100 text-slate-700;
+}
+
+.avatar--blue {
+	@apply bg-[var(--color-blue-600)] text-white;
+}
+
+.avatar--pink {
+	@apply bg-[var(--color-pink-700)] text-white;
+}
+
+.avatar--orange {
+	@apply bg-[var(--color-orange-700)] text-white;
+}
+
+.avatar--green {
+	@apply bg-[var(--color-green-800)] text-white;
+}
+
+/* Internal elements */
+.avatar__img {
+	@apply absolute object-cover w-full h-full;
+	inset: 0;
+}
+
+.avatar__initial {
+	@apply font-medium leading-none;
+}
+

package/src/styles/components/checkbox.css

@@ -0,0 +1,132 @@
+/* Checkbox Component Styles */
+.checkbox-container {
+  display: inline-block;
+  width: 100%;
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.checkbox-input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  column-gap: var(--checkbox-spacing-inline-gap, var(--multiselect-spacing-option-icon-gap));
+  cursor: pointer;
+  user-select: none;
+  width: 100%;
+  padding: var(--checkbox-spacing-label-padding, 8px 12px);
+  border-radius: var(--checkbox-border-radius, 6px);
+  transition: all var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+}
+
+.checkbox-box {
+  position: relative;
+  width: var(--checkbox-size-box-width);
+  height: var(--checkbox-size-box-height);
+  border: var(--checkbox-border-width) solid var(--checkbox-color-box-default-border);
+  border-radius: var(--checkbox-size-box-border-radius);
+  background-color: var(--checkbox-color-box-default-background);
+  opacity: var(--checkbox-opacity-default);
+  top: var(--checkbox-position-top);
+  left: var(--checkbox-position-left);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--checkbox-transition-duration) var(--checkbox-transition-timing);
+  flex-shrink: 0;
+}
+
+.checkbox-text {
+  margin-left: 0;
+  font-family: var(--checkbox-typography-fontFamily, 'Inter', sans-serif);
+  font-size: var(--checkbox-typography-fontSize, 14px);
+  line-height: var(--checkbox-typography-lineHeight, 20px);
+  color: var(--checkbox-color-label-default-text, #111827);
+  transition: color var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+}
+
+.checkbox-leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checkbox-icon {
+  color: var(--checkbox-color-icon-checked);
+  width: var(--checkbox-size-icon-width, 14px);
+  height: var(--checkbox-size-icon-height, 14px);
+}
+
+/* States */
+.checkbox--default .checkbox-label:hover {
+  background-color: var(--checkbox-color-label-hover-background, #f9fafb);
+}
+
+.checkbox--default .checkbox-label:hover .checkbox-box {
+  background-color: var(--checkbox-color-box-hover-background, #f3f4f6);
+  border-color: var(--checkbox-color-box-hover-border, #9ca3af);
+}
+
+.checkbox--checked .checkbox-box {
+  background-color: var(--checkbox-color-box-checked-background);
+  border-color: var(--checkbox-color-box-checked-border);
+}
+
+.checkbox--checked .checkbox-label {
+  background-color: transparent;
+  border-radius: var(--checkbox-border-radius);
+}
+
+.checkbox--error .checkbox-box {
+  background-color: var(--checkbox-color-box-error-background, #fef2f2);
+  border-color: var(--checkbox-color-box-error-border, #ef4444);
+}
+
+.checkbox--error .checkbox-text {
+  color: var(--checkbox-color-label-error-text, #dc2626);
+}
+
+.checkbox--error .checkbox-label {
+  background-color: var(--checkbox-color-label-error-background, #fef2f2);
+  border-radius: var(--checkbox-border-radius, 6px);
+}
+
+.checkbox--disabled .checkbox-label {
+  cursor: not-allowed;
+  background-color: var(--checkbox-color-label-disabled-background, transparent);
+}
+
+.checkbox--disabled .checkbox-box {
+  background-color: var(--checkbox-color-box-disabled-background, #f3f4f6);
+  border-color: var(--checkbox-color-box-disabled-border, #e5e7eb);
+}
+
+.checkbox--disabled .checkbox-text {
+  color: var(--checkbox-color-label-disabled-text, #9ca3af);
+}
+
+.checkbox--disabled .checkbox-icon {
+  color: var(--checkbox-color-icon-disabled, #9ca3af);
+}
+
+/* Focus styles */
+.checkbox-input:focus + .checkbox-label .checkbox-box {
+  outline: 2px solid var(--checkbox-color-focus-outline, #3b82f6);
+  outline-offset: 2px;
+}
+
+/* Disabled focus */
+.checkbox--disabled .checkbox-input:focus + .checkbox-label .checkbox-box {
+  outline: none;
+}

package/src/styles/components/dropdown.css

@@ -0,0 +1,214 @@
+/* DropdownInput Component Styles */
+.dropdown-container {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.dropdown-input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 12px;
+  border: 1px solid var(--multiselect-color-input-border-default, #6B7280);
+  border-radius: var(--input-border-radius-default, 6px);
+  background-color: var(--color-white, #ffffff);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  box-sizing: border-box;
+}
+
+.dropdown-input:hover:not(.dropdown-input--disabled) {
+  border-color: var(--multiselect-color-input-border-hover, #4B5563);
+  background-color: var(--color-neutral-50, #f9fafb);
+}
+
+.dropdown-input__text {
+  flex: 1;
+  font-family: var(--typography-font-family-sans, 'Inter', sans-serif);
+  font-size: var(--input-font-size-default, 14px);
+  line-height: var(--input-line-height-default, 20px);
+  color: var(--color-neutral-900, #111827);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dropdown-input__icon {
+  flex-shrink: 0;
+  margin-left: 8px;
+  color: var(--color-neutral-600, #4b5563);
+  transition: transform 0.2s ease-in-out;
+}
+
+.dropdown-input__icon--loading {
+  animation: spin 1s linear infinite;
+}
+
+.dropdown-input__icon--chevron {
+  transition: transform 0.2s ease-in-out;
+}
+
+.dropdown-input--open .dropdown-input__icon--chevron {
+  transform: rotate(180deg);
+}
+
+/* States */
+.dropdown-input--default .dropdown-input__text {
+  color: var(--color-neutral-500, #6b7280);
+}
+
+.dropdown-input--loading .dropdown-input__text {
+  color: var(--color-neutral-500, #6b7280);
+}
+
+.dropdown-input--selected .dropdown-input__text {
+  color: var(--color-neutral-900, #111827);
+}
+
+.dropdown-input--error {
+  background-color: var(--color-red-50, #fef2f2);
+  border-color: var(--multiselect-color-input-border-error, #ef4444);
+}
+
+.dropdown-input--error .dropdown-input__text {
+  color: var(--color-red-600, #dc2626);
+}
+
+.dropdown-input--error .dropdown-input__icon {
+  color: var(--color-red-600, #dc2626);
+}
+
+.dropdown-input--disabled {
+  background-color: var(--color-neutral-100, #f3f4f6);
+  border-color: var(--multiselect-color-input-border-disabled, #D1D5DB);
+  cursor: not-allowed;
+}
+
+.dropdown-input--disabled .dropdown-input__text {
+  color: var(--color-neutral-400, #9ca3af);
+}
+
+.dropdown-input--disabled .dropdown-input__icon {
+  color: var(--color-neutral-400, #9ca3af);
+}
+
+/* Dropdown Menu */
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + var(--multiselect-spacing-menu-gap));
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  width: 100%;
+  background-color: var(--multiselect-color-menu-background);
+  border: var(--multiselect-border-width) solid var(--multiselect-color-dropdownbasic-border);
+  border-top: 1px solid var(--multiselect-color-dropdownbasic-border);
+  border-radius: var(--multiselect-border-radius);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  max-height: var(--multiselect-size-menu-max-height);
+  overflow-y: auto;
+  padding: var(--multiselect-spacing-menu-padding);
+  opacity: 1;
+  transform: translateY(0);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: dropdownFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dropdown-option {
+  padding: var(--multiselect-spacing-option-padding);
+  font-family: var(--typography-font-family-sans, 'Inter', sans-serif);
+  font-size: var(--input-font-size-default, 14px);
+  line-height: var(--input-line-height-default, 20px);
+  color: var(--multiselect-color-option-text);
+  background-color: var(--multiselect-color-option-background);
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  gap: var(--multiselect-spacing-option-gap);
+}
+
+.dropdown-option:hover {
+  background-color: var(--multiselect-color-option-background-hover);
+}
+
+.dropdown-option:active {
+  background-color: var(--multiselect-color-option-background-hover);
+}
+
+/* Dropdown Footer */
+.dropdown-footer {
+  padding: var(--multiselect-spacing-footer-padding);
+  font-family: var(--typography-font-family-sans, 'Inter', sans-serif);
+  font-size: var(--input-font-size-default, 14px);
+  line-height: var(--input-line-height-default, 20px);
+  color: var(--multiselect-color-footer-text);
+  background-color: var(--multiselect-color-footer-background);
+  border-top: 1px solid var(--multiselect-color-menu-border);
+  margin-top: 4px;
+}
+
+/* Animations */
+@keyframes dropdownFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes dropdownFadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin-slow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin-fast {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.animate-spin-slow {
+  animation: spin-slow 2s linear infinite;
+}
+
+.animate-spin-fast {
+  animation: spin-fast 0.5s linear infinite;
+}