mautourco-components 0.1.2 → 0.2.0

package/src/styles/components/forms.css

@@ -1,13 +1,13 @@
 /* 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);
+  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-size: var(--input-font-size-default, 1rem);
+  line-height: var(--input-line-height-default, 1.5rem);
+  border-radius: 0.375rem;
+  border-width: 1px;
   border-style: solid;
-  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+  padding: var(--input-padding-vertical, 0.5rem) var(--input-padding-horizontal, 0.75rem);
   width: 100%;
   box-sizing: border-box;
   transition: all 0.2s ease-in-out;
@@ -24,119 +24,119 @@
   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);
+  color: var(--color-slate-400);
+  width: var(--input-search-iconSize, 1rem);
+  height: var(--input-search-iconSize, 1rem);
 }
 
-.input-icon--leading { left: var(--input-padding-horizontal); }
-.input-icon--trailing { right: var(--input-padding-horizontal); }
+.input-icon--leading { left: var(--input-padding-horizontal, 0.75rem); }
+.input-icon--trailing { right: var(--input-padding-horizontal, 0.75rem); }
 
 .input-field--with-icon.input-field--icon-leading {
-  padding-left: calc(var(--input-padding-horizontal) + var(--input-search-iconSize, 16px) + 8px);
+  padding-left: calc(var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem);
 }
 
 .input-field--with-icon.input-field--icon-trailing {
-  padding-right: calc(var(--input-padding-horizontal) + var(--input-search-iconSize, 16px) + 8px);
+  padding-right: calc(var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem);
 }
 
 .input-field:focus {
-  border-color: var(--input-state-focus-border-color);
+  border-color: var(--color-atoll-green-800);
 }
 
 /* É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);
+  background-color: var(--color-white);
+  border-color: var(--color-slate-300);
+  color: var(--color-slate-900);
 }
 
 .input-field--default::placeholder {
-  color: var(--input-state-default-placeholder-color);
+  color: var(--color-slate-400);
 }
 
 /* É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);
+  background-color: var(--color-white);
+  border-color: var(--color-atoll-green-800);
+  color: var(--color-slate-900);
 }
 
 .input-field--focus::placeholder {
-  color: var(--input-state-focus-placeholder-color);
+  color: var(--color-slate-400);
 }
 
 /* É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);
+  background-color: var(--color-green-50);
+  border-color: var(--color-green-500);
+  color: var(--color-green-700);
 }
 
 .input-field--success::placeholder {
-  color: var(--input-state-success-placeholder-color);
+  color: var(--color-green-400);
 }
 
 /* É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);
+  background-color: var(--color-red-50);
+  border-color: var(--color-red-500);
+  color: var(--color-red-700);
 }
 
 .input-field--error::placeholder {
-  color: var(--input-state-error-placeholder-color);
+  color: var(--color-red-400);
 }
 
 /* É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);
+  background-color: var(--color-slate-100);
+  border-color: var(--color-slate-200);
+  color: var(--color-slate-400);
   cursor: not-allowed;
 }
 
 .input-field--disabled::placeholder {
-  color: var(--input-state-disabled-placeholder-color);
+  color: var(--color-slate-300);
 }
 
 /* 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;
+  background-color: var(--color-slate-50);
+  padding: var(--spacing-xl, 2rem);
+  border-radius: var(--spacing-sm, 0.5rem);
+  border-left: 4px dotted var(--color-atoll-green-800);
+  margin: var(--spacing-lg, 1.5rem) 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;
+  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-size: var(--typography-font-size-2xl, 1.5re);
+  font-weight: var(--font-weight-font-bold);
+  color: var(--color-slate-900);
+  margin: 0 0 var(--spacing-lg, 1.5rem) 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);
+  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-size: var(--typography-font-size-lg, 1.125rem);
+  font-weight: var(--font-weight-font-medium);
+  color: var(--color-slate-700);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  margin: 0 0 var(--spacing-md) 0;
+  margin: 0 0 var(--spacing-md, 1rem) 0;
 }
 
 .input-variants {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  gap: var(--spacing-xl);
+  gap: var(--spacing-xl, 2rem);
 }
 
 .input-variant-section {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
+  gap: var(--spacing-md, 1rem);
 }
 
 .input-example {

package/src/styles/components/illustration.css

@@ -0,0 +1,7 @@
+.illustration {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+

package/src/styles/components/molecule/calendarInput.css

@@ -0,0 +1,157 @@
+.calendar-input {
+  @apply w-full h-11 overflow-hidden p-0 bg-white border border-[var(--color-tuna-500)] flex items-center gap-2 rounded-xl;
+  min-width: 0;
+}
+
+/* Set minimum width only on larger screens where there's space */
+@media (min-width: 768px) {
+  .calendar-input {
+    min-width: 190px;
+  }
+}
+
+.calendar-input__input-wrapper {
+  @apply flex items-center flex-1 h-full min-w-0 p-3;
+}
+
+/* Remove left padding when icon is on the right */
+.calendar-input--icon-right .calendar-input__input-wrapper {
+  @apply pl-4;
+}
+
+/* Remove right padding when icon is on the left */
+.calendar-input--icon-left .calendar-input__input-wrapper {
+  @apply pr-4 pl-0;
+}
+
+.calendar-input__icon-button.calendar-input__icon-button--left {
+ @apply justify-end w-fit pl-4;
+}
+
+.calendar-input__field {
+  @apply flex-1 bg-transparent border-none outline-none w-full text-[var(--color-neutral-800)] text-sm leading-5;
+}
+
+.calendar-input__field:disabled {
+  @apply cursor-not-allowed text-[var(--color-neutral-400)];
+}
+
+.calendar-input__icon-button {
+  @apply flex items-center justify-center w-10 h-full opacity-100 cursor-pointer;
+}
+
+.calendar-input__icon-button--right {
+  @apply rounded-r-md;
+}
+
+.calendar-input__icon-button--left {
+  @apply rounded-l-md;
+}
+
+.calendar-input__icon-button--full-bg {
+  @apply text-white bg-[var(--color-text-accent)];
+}
+
+.calendar-input__chevron {
+  @apply flex items-center justify-center w-5 h-5 shrink-0 text-[var(--color-neutral-800)];
+  transition: transform 0.2s ease;
+}
+
+.calendar-input__chevron--open {
+  transform: rotate(180deg);
+}
+
+/* Ensure label and icon remain visible when wrapper is set to active via data-state */
+.calendar-input-wrapper[data-state="active"] .calendar-input__label,
+.calendar-input-wrapper[data-state="active"] .calendar-input__icon-button {
+  @apply visible opacity-100;
+}
+
+/* Defensive: ensure label stays visible and above other elements */
+.calendar-input-wrapper .calendar-input__label {
+  @apply block z-[2];
+}
+
+/* STATE VARIANTS */
+
+/* Default state */
+.calendar-input--default {
+  @apply border-[var(--color-tuna-500)];
+}
+
+.calendar-input--default .calendar-input__icon-button--full-bg {
+  @apply bg-[var(--color-atoll-green-800)]
+}
+
+/* Active state (focused) */
+.calendar-input--active {
+  @apply border-[var(--color-neutral-800)]
+}
+
+/* Typing state */
+.calendar-input--typing {
+  @apply border-[var(--color-neutral-800)]
+}
+
+/* Success state */
+.calendar-input--success {
+  @apply bg-[var(--color-green-50)] border-[var(--color-green-700)];
+}
+
+.calendar-input--success .calendar-input__field {
+  @apply text-[var(--color-green-700)]
+}
+
+.calendar-input--success .calendar-input__icon-button--full-bg {
+  @apply bg-[var(--color-green-700)] !text-white;
+}
+
+.calendar-input--success .calendar-input__icon-button {
+  @apply bg-none text-[var(--color-green-700)];
+}
+
+/* Error state */
+.calendar-input--error {
+  @apply border-[var(--color-coral-red-600)] bg-[var(--color-coral-red-200)];
+}
+
+.calendar-input--error .calendar-input__field {
+  @apply text-[var(--color-coral-red-600)];
+}
+
+.calendar-input--error .calendar-input__icon-button {
+  @apply !bg-none !text-[var(--color-coral-red-600)];
+}
+
+.calendar-input--error .calendar-input__icon-button--full-bg {
+  @apply bg-[var(--color-coral-red-600)] !text-white;
+}
+
+/* Disabled state */
+.calendar-input--disabled {
+  @apply border-[var(--color-neutral-400)] bg-[var(--color-surface-50)]
+}
+
+.calendar-input--disabled .calendar-input__field {
+  @apply cursor-not-allowed text-[var(--color-tuna-400)];
+}
+
+.calendar-input--disabled .calendar-input__icon-button {
+  @apply !bg-none !text-[var(--color-tuna-400)]
+}
+
+.calendar-input--disabled .calendar-input__icon-button--full-bg {
+  @apply !bg-[var(--color-gray-200)] !text-[var(--color-tuna-400)]
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .calendar-input__icon-button {
+    @apply max-w-sm p-2;
+  }
+
+  .calendar-input__input-wrapper {
+    @apply px-3 py-2;
+  }
+
+}

package/src/styles/components/molecule/dateTime.css

@@ -0,0 +1,14 @@
+.ds-datetime {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.ds-datetime__calendar { flex: 0 0 320px; }
+.ds-datetime__time { width: 160px; }
+.ds-datetime__label { display:block; font-size: 12px; margin-bottom: 8px; }
+
+@media (max-width: 640px) {
+  .ds-datetime { flex-direction: column; }
+  .ds-datetime__calendar, .ds-datetime__time { width: 100%; }
+}

package/src/styles/components/molecule/location-dropdown.css

@@ -0,0 +1,204 @@
+/* Location Dropdown Component Styles */
+
+.location-dropdown {
+  @apply relative w-full flex flex-col gap-2;
+}
+
+/* Label */
+.location-dropdown__label {
+  @apply text-[var(--color-neutral-800)] text-sm;
+}
+
+.location-dropdown__label p {
+  @apply leading-normal;
+}
+
+/* Input / Trigger */
+.location-dropdown__input {
+  @apply w-full h-11 px-3 py-2.5 bg-white border border-[var(--color-tuna-500)] rounded-xl flex items-center justify-between gap-2 cursor-pointer transition-all duration-200;
+}
+
+.location-dropdown__input:hover {
+  @apply border-[var(--color-neutral-800)];
+}
+
+.location-dropdown__input-content {
+  @apply flex items-center gap-2 flex-1 min-w-0;
+}
+
+.location-dropdown__input-icon {
+  @apply text-[var(--color-neutral-800)] flex-shrink-0;
+}
+
+.location-dropdown__input-icon--placeholder {
+  @apply text-[var(--color-neutral-400)];
+}
+
+.location-dropdown__input-text {
+  @apply text-sm leading-5 text-[var(--color-neutral-800)] font-medium truncate;
+}
+
+.location-dropdown__input-text--placeholder {
+  @apply text-[var(--color-neutral-400)] font-normal;
+}
+
+.location-dropdown__input-chevron {
+  @apply text-[var(--color-neutral-800)] flex-shrink-0 transition-transform duration-200;
+}
+
+/* Input States */
+.location-dropdown__input--default {
+  @apply border-[var(--color-tuna-500)];
+}
+
+.location-dropdown__input--open {
+  @apply border-[var(--color-neutral-800)] shadow-sm;
+}
+
+.location-dropdown__input--open .location-dropdown__input-chevron {
+  @apply !transform !rotate-180;
+}
+
+.location-dropdown__input--selected {
+  @apply border-[var(--color-tuna-500)];
+}
+
+.location-dropdown__input--error {
+  @apply border-[var(--color-coral-red-600)] bg-[var(--color-coral-red-50)];
+}
+
+.location-dropdown__input--error .location-dropdown__input-text {
+  @apply text-[var(--color-coral-red-600)];
+}
+
+.location-dropdown__input--error .location-dropdown__input-icon,
+.location-dropdown__input--error .location-dropdown__input-chevron {
+  @apply text-[var(--color-coral-red-600)];
+}
+
+.location-dropdown__input--disabled {
+  @apply bg-[var(--color-surface-50)] border-[var(--color-neutral-400)] cursor-not-allowed opacity-60;
+}
+
+.location-dropdown__input--disabled .location-dropdown__input-text,
+.location-dropdown__input--disabled .location-dropdown__input-icon,
+.location-dropdown__input--disabled .location-dropdown__input-chevron {
+  @apply text-[var(--color-neutral-400)];
+}
+
+/* Dropdown Panel */
+.location-dropdown__panel {
+  @apply absolute top-full left-0 right-0 mt-2 bg-white rounded-xl overflow-hidden z-50 w-[17.5rem] border border-[var(--color-neutral-200)];
+}
+
+.location-dropdown__content {
+  @apply overflow-y-auto overflow-x-hidden;
+  scrollbar-width: thin;
+  scrollbar-color: #9ca3af #f3f4f6;
+}
+
+.location-dropdown__content::-webkit-scrollbar {
+  @apply w-1.5;
+}
+
+.location-dropdown__content::-webkit-scrollbar-track {
+  @apply bg-[#f3f4f6] rounded;
+}
+
+.location-dropdown__content::-webkit-scrollbar-thumb {
+  @apply bg-[#9ca3af] rounded;
+}
+
+.location-dropdown__options-wrapper {
+  @apply flex flex-col gap-3 p-4;
+}
+
+/* Group */
+.location-dropdown__group {
+  @apply flex flex-col;
+}
+
+.location-dropdown__group-header {
+  @apply px-2 py-2 text-xs font-bold text-[var(--color-neutral-800)] uppercase tracking-wide;
+}
+
+.location-dropdown__divider {
+  @apply w-full h-px bg-[var(--color-neutral-200)] my-2;
+}
+
+.location-dropdown__group-options {
+  @apply flex flex-col gap-3;
+}
+
+/* Option Item */
+.location-dropdown__option {
+  @apply flex items-center gap-2 px-2 py-2 cursor-pointer transition-all duration-150 rounded-lg;
+}
+
+.location-dropdown__option:hover {
+  @apply bg-[var(--color-surface-50)];
+}
+
+.location-dropdown__option--selected {
+  @apply bg-[#f0fdfb] border-[0.5px] border-solid border-[#15b7b6];
+}
+
+.location-dropdown__option--selected:hover {
+  @apply bg-[#e6fcf9];
+}
+
+.location-dropdown__option--disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.location-dropdown__option--disabled:hover {
+  @apply bg-transparent;
+}
+
+.location-dropdown__option-icon {
+  @apply text-[var(--color-neutral-800)] flex-shrink-0;
+}
+
+.location-dropdown__option--selected .location-dropdown__option-icon {
+  @apply text-[var(--color-atoll-green-800)];
+}
+
+.location-dropdown__option-text {
+  @apply text-sm leading-5 text-[var(--color-neutral-800)] font-medium flex-1 min-w-0;
+}
+
+.location-dropdown__option--selected .location-dropdown__option-text {
+  @apply text-[var(--color-atoll-green-800)] font-semibold;
+}
+
+/* Type-specific adjustments */
+.location-dropdown--airport-port .location-dropdown__content {
+  @apply max-h-[auto];
+}
+
+.location-dropdown--accommodation .location-dropdown__content {
+  @apply max-h-[240px];
+}
+
+.location-dropdown--pickup-dropoff .location-dropdown__content {
+  @apply max-h-[240px];
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .location-dropdown__input {
+    @apply px-2.5 py-2;
+  }
+
+  .location-dropdown__input-text {
+    @apply text-xs;
+  }
+
+  .location-dropdown__option {
+    @apply px-2 py-1.5;
+  }
+
+  .location-dropdown__option-text {
+    @apply text-xs;
+  }
+}

package/src/styles/components/molecule/timePicker.css

@@ -0,0 +1,79 @@
+.time-picker-wrapper {
+  @apply flex flex-col gap-2 w-fit;
+}
+
+.time-picker__label {
+  @apply m-0 font-sans text-sm font-medium leading-5 text-[var(--input-color-label-default)];
+}
+
+.time-picker {
+  @apply flex items-center gap-3 p-0 h-11;
+}
+
+.time-picker__input {
+  @apply w-[2.8125rem] h-[2.8125rem] px-3 rounded-xl bg-white border border-[var(--color-tuna-500)]
+}
+
+.time-picker__input:focus-visible,
+.time-picker__input:active {
+  @apply shadow-none outline-none;
+}
+
+.time-picker__colon {
+  @apply font-sans text-sm leading-5
+    text-[var(--input-color-foreground-default)];
+}
+
+.time-picker__am-pm {
+  @apply flex items-center overflow-hidden rounded-md h-11 shrink-0;
+}
+
+.time-picker__seg {
+  @apply border border-[var(--segmented-button-color-border-default)]
+    bg-[var(--segmented-button-color-background-default)]
+    py-2 px-3 min-w-[3.82rem]
+    h-full flex items-center justify-center
+    cursor-pointer
+    text-[var(--color-tuna-700)] font-bold text-sm;
+}
+
+.time-picker__seg--left {
+  @apply border-r-0 rounded-l-md;
+}
+
+.time-picker__seg--right {
+  @apply border-l-0 rounded-r-md;
+}
+
+.time-picker__seg--selected {
+  @apply bg-[var(--segmented-button-color-background-selected)]
+    border-[var(--segmented-button-color-border-selected)]
+    text-[var(--segmented-button-color-foreground-selected)];
+}
+
+.time-picker--default .time-picker__unit {
+  @apply bg-[var(--input-color-background-default)]
+    border-[var(--input-color-border-default)];
+}
+
+.time-picker--active .time-picker__unit,
+.time-picker--typing .time-picker__unit {
+  @apply border-2 border-[var(--input-color-border-active)];
+}
+
+.time-picker--success .time-picker__unit {
+  @apply bg-[var(--color-success-50)]
+    border-[var(--color-success-500)];
+}
+
+.time-picker--error .time-picker__unit {
+  @apply bg-[var(--color-error-50)]
+    border-[var(--color-error-500)];
+}
+
+.time-picker--disabled .time-picker__unit,
+.time-picker--disabled .time-picker__seg {
+  @apply bg-[var(--input-color-background-disabled)]
+    border-[var(--input-color-border-disabled)]
+    cursor-not-allowed opacity-60;
+}