mautourco-components 0.1.1

package/src/styles/components/forms.css

@@ -0,0 +1,147 @@
+/* Styles Input centralisés: consomment uniquement des variables CSS issues de Style Dictionary */
+
+.input-field {
+  font-family: var(--typography-font-family-sans);
+  font-size: var(--input-font-size-default);
+  line-height: var(--input-line-height-default);
+  border-radius: var(--input-border-radius-default);
+  border-width: var(--input-border-width-default);
+  border-style: solid;
+  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+  width: 100%;
+  box-sizing: border-box;
+  transition: all 0.2s ease-in-out;
+  outline: none;
+}
+
+/* Wrapper and icon positioning for input with icon */
+.input-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.input-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--input-state-default-placeholder-color);
+  width: var(--input-search-iconSize, 16px);
+  height: var(--input-search-iconSize, 16px);
+}
+
+.input-icon--leading { left: var(--input-padding-horizontal); }
+.input-icon--trailing { right: var(--input-padding-horizontal); }
+
+.input-field--with-icon.input-field--icon-leading {
+  padding-left: calc(var(--input-padding-horizontal) + var(--input-search-iconSize, 16px) + 8px);
+}
+
+.input-field--with-icon.input-field--icon-trailing {
+  padding-right: calc(var(--input-padding-horizontal) + var(--input-search-iconSize, 16px) + 8px);
+}
+
+.input-field:focus {
+  border-color: var(--input-state-focus-border-color);
+}
+
+/* État par défaut */
+.input-field--default {
+  background-color: var(--input-state-default-background-color);
+  border-color: var(--input-state-default-border-color);
+  color: var(--input-state-default-text-color);
+}
+
+.input-field--default::placeholder {
+  color: var(--input-state-default-placeholder-color);
+}
+
+/* État focus */
+.input-field--focus {
+  background-color: var(--input-state-focus-background-color);
+  border-color: var(--input-state-focus-border-color);
+  color: var(--input-state-focus-text-color);
+}
+
+.input-field--focus::placeholder {
+  color: var(--input-state-focus-placeholder-color);
+}
+
+/* État success */
+.input-field--success {
+  background-color: var(--input-state-success-background-color);
+  border-color: var(--input-state-success-border-color);
+  color: var(--input-state-success-text-color);
+}
+
+.input-field--success::placeholder {
+  color: var(--input-state-success-placeholder-color);
+}
+
+/* État error */
+.input-field--error {
+  background-color: var(--input-state-error-background-color);
+  border-color: var(--input-state-error-border-color);
+  color: var(--input-state-error-text-color);
+}
+
+.input-field--error::placeholder {
+  color: var(--input-state-error-placeholder-color);
+}
+
+/* État disabled */
+.input-field--disabled {
+  background-color: var(--input-state-disabled-background-color);
+  border-color: var(--input-state-disabled-border-color);
+  color: var(--input-state-disabled-text-color);
+  cursor: not-allowed;
+}
+
+.input-field--disabled::placeholder {
+  color: var(--input-state-disabled-placeholder-color);
+}
+
+/* Styles pour le showcase */
+.input-showcase {
+  background-color: var(--color-neutral-50);
+  padding: var(--spacing-xl);
+  border-radius: var(--spacing-sm);
+  border-left: 4px dotted var(--color-primary-500);
+  margin: var(--spacing-lg) 0;
+}
+
+.input-showcase h1 {
+  font-family: var(--typography-font-family-sans);
+  font-size: var(--typography-font-size-2xl);
+  font-weight: var(--typography-font-weight-bold);
+  color: var(--color-neutral-900);
+  margin: 0 0 var(--spacing-lg) 0;
+}
+
+.input-showcase h2 {
+  font-family: var(--typography-font-family-sans);
+  font-size: var(--typography-font-size-lg);
+  font-weight: var(--typography-font-weight-medium);
+  color: var(--color-neutral-700);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 var(--spacing-md) 0;
+}
+
+.input-variants {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: var(--spacing-xl);
+}
+
+.input-variant-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.input-example {
+  width: 100%;
+  max-width: 300px;
+}
+
+

package/src/styles/components/multiselect-dropdown.css

@@ -0,0 +1,231 @@
+/* MultiSelectDropdown Component Styles */
+.multiselect-dropdown {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.multiselect-dropdown__input-container {
+  position: relative;
+  width: 100%;
+}
+
+.multiselect-dropdown__input {
+  width: 100%;
+}
+
+/* Hide placeholder text when chips are displayed */
+.multiselect-dropdown__input-container:has(.multiselect-dropdown__chips) .dropdown-input__text {
+  opacity: 0;
+}
+
+.multiselect-dropdown__chips {
+  position: absolute;
+  top: 50%;
+  left: var(--multiselect-spacing-chips-left);
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: var(--multiselect-spacing-chips-gap);
+  max-width: calc(100% - var(--multiselect-size-icon-chevron-width));
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 10;
+  padding: var(--multiselect-spacing-chips-padding);
+}
+
+.multiselect-dropdown__chip {
+  flex-shrink: 0;
+  pointer-events: auto;
+}
+
+.multiselect-dropdown__hidden-count {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--multiselect-spacing-hidden-count-min-width);
+  height: var(--multiselect-size-hidden-count-height);
+  padding: var(--multiselect-spacing-hidden-count-padding);
+  background-color: var(--multiselect-color-hidden-count-background);
+  border-radius: var(--multiselect-border-radius);
+  font-family: var(--typography-font-family-sans, 'Inter', sans-serif);
+  font-size: var(--multiselect-size-typography-hidden-count-font-size);
+  font-weight: var(--multiselect-size-typography-hidden-count-font-weight);
+  color: var(--multiselect-color-hidden-count-text);
+  pointer-events: auto;
+}
+
+.multiselect-dropdown__panel {
+  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: var(--multiselect-color-menu-border-top);
+  border-radius: var(--multiselect-border-radius);
+  box-shadow: var(--multiselect-shadow-menu);
+  overflow: hidden;
+  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);
+}
+
+.multiselect-dropdown__menu {
+  position: relative;
+  opacity: 1;
+  transform: translateY(0);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+}
+
+.multiselect-dropdown__search {
+  padding: var(--multiselect-spacing-options-padding-y) var(--multiselect-spacing-options-padding-x);
+  padding-bottom: var(--multiselect-spacing-search-padding-bottom, var(--multiselect-spacing-options-padding-y));
+  padding-right: var(--multiselect-spacing-search-padding-right, var(--multiselect-spacing-options-padding-x));
+}
+
+.multiselect-dropdown__search-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 var(--spacing-sm, 8px);
+  border-radius: var(--multiselect-border-radius);
+  border: var(--multiselect-border-width) solid var(--multiselect-color-dropdownbasic-border);
+  outline: none;
+}
+
+.multiselect-dropdown__options {
+  max-height: var(--multiselect-size-menu-max-height);
+  overflow-y: auto;
+  padding: var(--multiselect-spacing-options-padding-y) var(--multiselect-spacing-options-padding-x);
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--multiselect-spacing-options-gap-y, var(--multiselect-spacing-option-gap));
+}
+
+.multiselect-dropdown__group {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--multiselect-spacing-group-gap-y);
+}
+
+.multiselect-dropdown__group + .multiselect-dropdown__group {
+  border-top: var(--multiselect-border-width) solid var(--multiselect-color-divider-default);
+  padding-top: var(--multiselect-spacing-group-gap-y);
+}
+
+.multiselect-dropdown__group-header {
+  padding: var(--multiselect-spacing-group-header-padding-y) var(--multiselect-spacing-group-header-padding-x);
+  display: flex;
+  align-items: center;
+  column-gap: var(--multiselect-spacing-group-header-gap);
+}
+.multiselect-dropdown__group-icon {
+  width: var(--multiselect-size-group-icon);
+  height: var(--multiselect-size-group-icon);
+  border-radius: 9999px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.multiselect-dropdown__group-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.multiselect-dropdown__group-options {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--multiselect-spacing-option-gap);
+}
+
+.multiselect-dropdown__option {
+  cursor: pointer;
+  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: var(--multiselect-border-radius);
+  border: var(--multiselect-border-selected-width) solid var(--multiselect-color-option-border-default);
+  /* Reserve the same space in both states to avoid layout shift */
+  min-width: var(--multiselect-size-optionitem-min-width);
+  min-height: var(--multiselect-size-optionitem-min-height);
+  padding: var(--multiselect-spacing-optionitem-padding-y) var(--multiselect-spacing-optionitem-padding-x);
+  display: flex;
+  align-items: center;
+  gap: var(--multiselect-spacing-optionitem-gap);
+}
+
+.multiselect-dropdown__option:hover {
+  background-color: var(--multiselect-color-option-background-hover);
+  border-radius: var(--multiselect-border-selected-radius, var(--multiselect-border-radius));
+}
+
+.multiselect-dropdown__option:active {
+  background-color: var(--multiselect-color-option-background-hover);
+  border-radius: var(--multiselect-border-selected-radius, var(--multiselect-border-radius));
+}
+
+/* Selected state applied to the option container when its Checkbox is checked */
+.multiselect-dropdown__option:has(.checkbox--checked) {
+  opacity: 1;
+  border-radius: var(--multiselect-border-selected-radius, var(--multiselect-border-radius));
+  border-color: var(--multiselect-color-option-item-border-positive);
+  border-top: var(--multiselect-border-selected-width) solid var(--multiselect-color-option-item-border-positive);
+  background-color: var(--multiselect-color-option-item-selected);
+}
+
+/* Ensure wrapper controls spacing */
+.multiselect-dropdown__option .checkbox-label { padding: 0; width: 100%; }
+
+.multiselect-dropdown__option-icon {
+  width: var(--multiselect-size-option-icon);
+  height: var(--multiselect-size-option-icon);
+  border-radius: 9999px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.multiselect-dropdown__option-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.multiselect-dropdown__footer {
+  padding: var(--multiselect-spacing-footer-padding);
+  font-family: var(--typography-font-family-sans, 'Inter', sans-serif);
+  font-size: var(--multiselect-size-typography-footer-font-size);
+  line-height: var(--multiselect-size-typography-footer-line-height);
+  color: var(--multiselect-color-footer-text);
+  background-color: var(--multiselect-color-footer-background);
+  border-top: var(--multiselect-color-menu-border-top);
+  margin-top: 0;
+}
+
+.multiselect-dropdown__footer-text {
+  margin: 0;
+}
+
+/* States */
+.multiselect-dropdown--disabled .multiselect-dropdown__chips {
+  opacity: 0.6;
+}
+
+
+/* Responsive adjustments */
+@media (max-width: var(--multiselect-responsive-mobile-breakpoint)) {
+  .multiselect-dropdown__chips {
+    max-width: calc(100% - var(--multiselect-responsive-mobile-icon-width));
+  }
+  
+  .multiselect-dropdown__hidden-count {
+    min-width: var(--multiselect-responsive-mobile-hidden-count-min-width);
+    height: var(--multiselect-responsive-mobile-hidden-count-height);
+    font-size: var(--multiselect-responsive-mobile-hidden-count-font-size);
+  }
+}

package/src/styles/components/organism/footer.css

@@ -0,0 +1,113 @@
+/* ===== Footer Container ===== */
+.footer {
+    @apply w-full bg-[var(--footer-color-background-default)] text-white font-sans;
+}
+
+.footer__wrapper {
+    @apply mx-auto w-full max-w-[1440px] px-6 py-10 md:px-10 lg:px-16;
+}
+
+.footer__desktop {
+    @apply flex-col hidden gap-10 md:flex;
+}
+
+.footer__top-row {
+    @apply flex flex-col gap-8 md:flex-row md:items-start md:justify-between lg:gap-0;
+}
+
+.footer__content-left {
+    @apply flex flex-wrap flex-1 gap-10 md:flex-nowrap lg:gap-16;
+}
+
+.footer__column {
+    @apply min-w-0 lg:min-w-[120px] space-y-3;
+}
+
+.footer__column-title {
+    @apply text-sm font-semibold tracking-wide text-white uppercase;
+}
+
+.footer__column-links {
+    @apply flex flex-col gap-1.5;
+}
+
+.footer__contact {
+    @apply min-w-0 lg:min-w-[180px] space-y-3;
+}
+
+.footer__contact-info {
+    @apply space-y-1 text-xs text-white/80;
+}
+
+.footer__socials {
+    @apply min-w-0 lg:min-w-[120px] space-y-3;
+}
+
+.footer__socials-icons {
+    @apply flex flex-wrap items-center gap-3;
+}
+
+.footer__social-link {
+    @apply text-white transition hover:opacity-80;
+}
+
+.footer__logo-section {
+    @apply flex items-start justify-end shrink-0;
+}
+
+.footer__logo-container {
+    @apply flex flex-col items-end gap-2;
+}
+
+.footer__copyright {
+    @apply text-[10px] text-white/70 text-right;
+}
+
+.footer__copyright-standalone {
+    @apply text-[10px] text-white/70;
+}
+
+/* ===== Mobile Layout ===== */
+.footer__mobile {
+    @apply flex flex-col gap-6 md:hidden;
+}
+
+.footer__mobile-section {
+    @apply pb-3 border-b border-white/10;
+}
+
+.footer__mobile-section-button {
+    @apply flex items-center justify-between w-full gap-2 text-sm font-semibold text-white;
+}
+
+.footer__mobile-section-icon {
+    @apply transition-transform;
+}
+
+.footer__mobile-section-icon--rotated {
+    @apply rotate-180;
+}
+
+.footer__mobile-section-content {
+    @apply mt-2 flex flex-col gap-1.5;
+}
+
+.footer__mobile-contact {
+    @apply space-y-2;
+}
+
+.footer__mobile-contact-title {
+    @apply text-sm font-semibold tracking-wide text-white uppercase;
+}
+
+.footer__mobile-contact-info {
+    @apply space-y-1 text-xs text-white/80;
+}
+
+.footer__mobile-footer {
+    @apply flex flex-col items-center gap-2 mt-4;
+}
+
+.footer__mobile-copyright {
+    @apply text-[10px] text-white/70 text-center;
+}

package/src/styles/components/organism/topnavigation.css

@@ -0,0 +1,162 @@
+.header {
+    @apply flex md:justify-between w-full h-[4.5rem] px-4 lg:px-24 shadow-[0_3px_8px_#00000040] sm:justify-start gap-[1.375rem];
+}
+
+.header-logo {
+    @apply flex flex-col justify-center h-full;
+}
+
+.header-nav {
+    @apply flex items-center justify-end w-auto;
+}
+
+.header-nav__items {
+    @apply flex items-stretch h-full;
+}
+
+.header__item {
+    @apply min-w-[8.1875rem] flex justify-center h-full items-center;
+    font-weight: var(--typography-font-weight-regular);
+    font-style: Regular;
+    font-size: var(--typography-font-size-base);
+
+    &:hover:not(:has(button)) {
+        @apply bg-[var(--color-elevation-state-hover-subtle)];
+    }
+
+    &:active {
+        @apply bg-[var(--color-elevation-state-pressed-subtle)]
+    }
+
+}
+
+.header__item--active {
+    @apply lg:border-b-4 lg:border-l-0 border-l-4 border-[var(--color-sandy-brown-500)] text-[var(--color-text-brand)];
+    font-weight: var(--typography-body-lg-6-font-weight-bold);
+
+    * {
+        @apply text-[var(--color-text-brand)];
+    }
+}
+
+.header-logo__link {
+    @apply inline-flex items-center gap-2;
+}
+
+.header-logo__image {
+    @apply w-auto h-6 md:h-7;
+}
+
+.header__item__link {
+    @apply block px-1 py-1 transition-colors;
+}
+
+.header-nav__user-section {
+    @apply flex items-center h-full gap-3 pl-8;
+}
+
+.header-nav__user-connected-section {
+    @apply border-l border-l-[var(--color-surface-300)]
+}
+
+.header-nav__user-container {
+    @apply flex items-center h-full;
+}
+
+/* ===== Mobile Nav Classes ===== */
+
+.header-logo__link {
+    @apply inline-flex items-center gap-2;
+}
+
+.header-logo__image-mobile {
+    @apply w-auto h-6;
+}
+
+.header-login-button {
+    @apply hidden rounded-full bg-teal-600 px-4 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 md:inline-block;
+}
+
+.header-user-actions {
+    @apply flex items-center gap-3;
+}
+
+.mobile-nav__backdrop {
+    @apply fixed inset-0 z-40 transition-opacity bg-black/40;
+}
+
+.mobile-nav__backdrop--open {
+    @apply opacity-100 pointer-events-auto;
+}
+
+.mobile-nav__backdrop--closed {
+    @apply opacity-0 pointer-events-none;
+}
+
+.mobile-nav__sheet {
+    @apply fixed left-0 top-0 z-50 h-dvh w-[84vw] max-w-[360px] bg-white shadow-xl border-r border-black/10 transition-transform duration-300 flex flex-col;
+}
+
+.mobile-nav__sheet--open {
+    @apply translate-x-0;
+}
+
+.mobile-nav__sheet--closed {
+    @apply -translate-x-full;
+}
+
+.mobile-nav__header {
+    @apply flex flex-col items-start justify-between px-4 pb-4 border-b border-black/10;
+
+    & >:first-child {
+        @apply flex justify-end w-full;
+    }
+
+    & >:last-child {
+        @apply flex justify-start w-full;
+    }
+}
+
+.mobile-nav__close-button {
+    @apply inline-flex items-center justify-center rounded-full size-9 hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-black/20;
+}
+
+.mobile-nav__content {
+    @apply flex-1 overflow-y-auto;
+}
+
+.mobile-nav__list {
+    @apply py-2;
+}
+
+.mobile-nav__item-button {
+    @apply w-full px-4 py-3 text-sm text-left;
+}
+
+.mobile-nav__footer {
+    @apply p-4 border-t border-black/10;
+}
+
+.mobile-nav__user-info {
+    @apply flex items-center justify-between;
+}
+
+.mobile-nav__user-text {
+    @apply text-sm;
+}
+
+.mobile-nav__user-name {
+    @apply font-medium text-black;
+}
+
+.mobile-nav__user-agency {
+    @apply text-black/60;
+}
+
+.mobile-nav__logout-button {
+    @apply rounded-full px-4 py-1.5 text-sm font-medium border border-black/10 hover:bg-black/5;
+}
+
+.mobile-nav__login-button {
+    @apply w-full px-4 py-2 text-sm font-medium text-white transition bg-teal-600 rounded-full shadow-sm hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500;
+}

package/src/styles/components/scrollbar.css

@@ -0,0 +1,63 @@
+/* Scrollbar Styles */
+/* Webkit browsers (Chrome, Safari, Edge) */
+::-webkit-scrollbar {
+  width: var(--scrollbar-size-width);
+  height: var(--scrollbar-size-width);
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-color-track);
+  border-radius: var(--scrollbar-border-radius);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-color-thumb);
+  border-radius: var(--scrollbar-border-radius);
+  margin: var(--scrollbar-spacing-margin);
+  min-height: 20px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-color-thumb-hover);
+}
+
+::-webkit-scrollbar-corner {
+  background: var(--scrollbar-color-track);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
+}
+
+/* Custom scrollbar for specific elements */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: var(--scrollbar-size-width);
+  height: var(--scrollbar-size-width);
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: var(--scrollbar-color-track);
+  border-radius: var(--scrollbar-border-radius);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-color-thumb);
+  border-radius: var(--scrollbar-border-radius);
+  margin: var(--scrollbar-spacing-margin);
+  min-height: 20px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-color-thumb-hover);
+}
+
+.custom-scrollbar::-webkit-scrollbar-corner {
+  background: var(--scrollbar-color-track);
+}