mautourco-components 0.2.45 → 0.2.47

package/dist/styles/components/molecule/age-selector.css

@@ -0,0 +1,216 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* AgeSelector Component Styles */
+
+.age-selector {
+  position: relative;
+  display: flex;
+  width: 5rem;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Label */
+
+.age-selector__label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  color: var(--dropdown-color-label-default,#262626);
+}
+
+.age-selector__required {
+  color: var(--chip-color-red-outline-foreground,#991b1b);
+}
+
+/* Container */
+
+.age-selector__container {
+  position: relative;
+  width: 100%;
+}
+
+/* Input wrapper - matching Figma design */
+
+.age-selector__input {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-radius: 0.75rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(38 38 38 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  cursor: default;
+}
+
+.age-selector__input:hover {
+  border-color: var(--dropdown-color-border-hover,#0f7173);
+}
+
+.age-selector__input--open {
+  border-color: var(--dropdown-color-border-hover,#0f7173);
+}
+
+.age-selector__input--default .age-selector__input-field::placeholder {
+  color: var(--dropdown-selector-color-filled-foreground-default,#737373);
+}
+
+/* Input field */
+
+.age-selector__input-field {
+  flex: 1 1 0%;
+  border-style: none;
+  background-color: #ffffff00;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--dropdown-color-foreground-value,#262626);
+  cursor: text;
+  min-width: 0;
+}
+
+.age-selector__input-field::placeholder {
+  color: var(--dropdown-selector-color-filled-foreground-default,#737373);
+}
+
+/* Dropdown button */
+
+.age-selector__dropdown-btn {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-style: none;
+  background-color: #ffffff00;
+  margin: 0px;
+  padding: 0px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.age-selector__dropdown-btn:hover {
+  opacity: 0.8;
+}
+
+/* Icon */
+
+.age-selector__icon {
+  color: var(--color-text-default,#262626);
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.age-selector__icon--open {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+/* Dropdown menu */
+
+.age-selector__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0px;
+  right: 0px;
+  margin-top: 0.25rem;
+  border-radius: 0.75rem;
+  border-width: 1px;
+  border-color: var(--color-border-subtle,#e5e5e5);
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  max-height: 12rem;
+  overflow-y: auto;
+  z-index: 50;
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  animation: age-selector-dropdown-enter 0.15s ease-out;
+}
+
+@keyframes age-selector-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Dropdown option */
+
+.age-selector__option {
+  width: 100%;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--color-text-default,#262626);
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.age-selector__option:hover {
+  background-color: var(--dropdown-selector-color-select-item-background-hover,#115b5e);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.age-selector__option--selected {
+  background-color: var(--dropdown-selector-color-select-item-background-selected,#0f7173);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.age-selector__option--selected:hover {
+  background-color: var(--dropdown-selector-color-select-item-background-selected,#0f7173);
+}
+
+/* Scrollbar styling */
+
+.age-selector__dropdown::-webkit-scrollbar {
+  width: 0.375rem;
+}
+
+.age-selector__dropdown::-webkit-scrollbar-track {
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+.age-selector__dropdown::-webkit-scrollbar-thumb {
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+}
+
+.age-selector__dropdown::-webkit-scrollbar-thumb:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
+}

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

@@ -234,23 +234,42 @@
 /* Disabled state */
 
 .calendar-input--disabled {
-  border-color: var(--color-neutral-400);
-  background-color: var(--color-surface-50);
+  cursor: not-allowed;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1));
 }
 
 .calendar-input--disabled .calendar-input__field {
   cursor: not-allowed;
-  color: var(--color-tuna-400);
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
+}
+
+.calendar-input--disabled .calendar-input__field::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
 }
 
 .calendar-input--disabled .calendar-input__icon-button {
+  cursor: not-allowed;
   background-image: none !important;
-  color: var(--color-tuna-400) !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1)) !important;
 }
 
 .calendar-input--disabled .calendar-input__icon-button--full-bg {
-  background-color: var(--color-gray-200) !important;
-  color: var(--color-tuna-400) !important;
+  cursor: not-allowed;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)) !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1)) !important;
+}
+
+.calendar-input--disabled .calendar-input__chevron {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
 }
 
 /* Responsive design */

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

@@ -132,15 +132,27 @@
 
 .location-dropdown__input--disabled {
   cursor: not-allowed;
-  border-color: var(--color-neutral-400);
-  background-color: var(--color-surface-50);
-  opacity: 0.6;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1));
 }
 
 .location-dropdown__input--disabled .location-dropdown__input-text,
 .location-dropdown__input--disabled .location-dropdown__input-icon,
 .location-dropdown__input--disabled .location-dropdown__input-chevron {
-  color: var(--color-neutral-400);
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
+}
+
+/* Disabled label - override all text elements */
+
+.location-dropdown--disabled .location-dropdown__label,
+.location-dropdown--disabled .location-dropdown__label p,
+.location-dropdown--disabled .location-dropdown__label * {
+  font-weight: 400 !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1)) !important;
 }
 
 /* Dropdown Panel */

package/dist/styles/components/organism/pax-selector.css

@@ -102,6 +102,31 @@
   transform: rotate(180deg)!important;
 }
 
+/* Disabled state */
+
+.pax-selector--disabled .pax-selector__label {
+  color: #a3a3a3;
+  font-weight: 400;
+}
+
+.pax-selector--disabled .pax-selector__input {
+  background: #fbfbfb;
+  border-color: #d1d5db;
+  cursor: not-allowed;
+}
+
+.pax-selector--disabled .pax-selector__input-icon,
+.pax-selector--disabled .pax-selector__input-text,
+.pax-selector--disabled .pax-selector__chevron {
+  color: #a3a3a3;
+}
+
+.pax-selector__input--disabled {
+  background: #fbfbfb;
+  border-color: #d1d5db;
+  cursor: not-allowed;
+}
+
 /* Dropdown Panel */
 
 .pax-selector__dropdown {
@@ -413,187 +438,6 @@
   z-index: 50;
 }
 
-/* Age Selector Styles */
-
-.pax-selector__age-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 80px;
-  position: relative;
-}
-
-.pax-selector__age-label {
-  font-family: var(--typography-body-family, 'Satoshi', sans-serif);
-  font-weight: var(--font-weight-font-normal, 400);
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--dropdown-color-label-default, #262626);
-}
-
-.pax-selector__age-required {
-  color: var(--chip-color-red-outline-foreground, #991b1b);
-}
-
-/* Age Selector using DropdownInput structure */
-
-.pax-selector__age-dropdown-container {
-  width: 100%;
-}
-
-.pax-selector__age-dropdown-input {
-  min-height: auto;
-  padding: 12px 8px 12px 16px;
-  border: 1px solid var(--dropdown-color-border-value, #262626);
-  border-radius: 12px;
-  cursor: default;
-}
-
-.pax-selector__age-dropdown-input:hover {
-  border-color: var(--dropdown-color-border-hover, #0f7173);
-}
-
-.pax-selector__age-dropdown-input:focus-within {
-  border-color: var(--dropdown-color-border-hover, #0f7173);
-}
-
-.pax-selector__age-input-text {
-  padding: 0;
-  background: transparent;
-  border: none;
-  outline: none;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: var(--font-weight-font-medium, 500);
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--dropdown-color-foreground-value, #262626);
-  white-space: nowrap;
-  overflow: visible;
-  text-overflow: clip;
-  cursor: text;
-  width: 100%;
-}
-
-.pax-selector__age-input-text::placeholder {
-  color: var(--dropdown-selector-color-filled-foreground-default, #737373);
-}
-
-.pax-selector__age-dropdown-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin-left: 8px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.pax-selector__age-dropdown-btn:hover {
-  opacity: 0.8;
-}
-
-.pax-selector__age-dropdown-btn .dropdown-input__icon--chevron {
-  transition: transform 0.2s ease;
-}
-
-.pax-selector__age-dropdown-input--open .pax-selector__age-dropdown-btn .dropdown-input__icon--chevron {
-  transform: rotate(180deg);
-}
-
-.pax-selector__age-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  padding: 12px 16px;
-  background: var(--dropdown-color-background-value, #ffffff);
-  border: 1px solid var(--dropdown-color-border-value, #262626);
-  border-radius: 12px;
-  cursor: pointer;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: var(--font-weight-font-medium, 500);
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--dropdown-color-foreground-value, #262626);
-  transition: all 0.2s ease;
-}
-
-.pax-selector__age-trigger:hover {
-  border-color: var(--dropdown-color-border-hover, #0f7173);
-}
-
-.pax-selector__age-value {
-  flex: 1;
-  text-align: left;
-}
-
-.pax-selector__age-chevron {
-  color: var(--color-text-default, #262626);
-  transition: transform 0.2s ease;
-  flex-shrink: 0;
-}
-
-.pax-selector__age-chevron--open {
-  transform: rotate(180deg);
-}
-
-/* Use dropdown-menu from dropdown.css, but add custom styles for age selector */
-
-.pax-selector__age-dropdown-container .dropdown-menu {
-  max-height: 200px;
-  z-index: 110;
-}
-
-.pax-selector__age-dropdown-container .dropdown-option--selected {
-  background-color: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
-  color: #ffffff;
-}
-
-.pax-selector__age-dropdown-container .dropdown-option--selected:hover {
-  background-color: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
-  color: #ffffff;
-}
-
-@keyframes pax-selector-age-dropdown-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.pax-selector__age-option {
-  width: 100%;
-  padding: 8px 12px;
-  background: var(--dropdown-selector-color-select-item-background-default, #ffffff);
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--color-text-default, #262626);
-  transition: all 0.2s ease;
-}
-
-.pax-selector__age-option:hover {
-  background: var(--dropdown-selector-color-select-item-background-hover, #115b5e);
-  color: #ffffff;
-}
-
-.pax-selector__age-option--selected {
-  background: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
-  color: #ffffff;
-}
-
 /* Age Section */
 
 .pax-selector__age-section {
@@ -610,14 +454,8 @@
 
 .pax-selector__age-groups {
   display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.pax-selector__age-row {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 
 /* Multiple Rooms Styles */

package/dist/styles/components/organism/transfer-line.css

@@ -137,4 +137,44 @@
 
 .transfer-line__date-picker {
   height: 2.75rem;
+}
+
+/* Disabled state */
+
+.transfer-line--disabled {
+  pointer-events: none;
+}
+
+.transfer-line--disabled .transfer-line__field-label {
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
+}
+
+/* Match Figma design colors for disabled inputs */
+
+.transfer-line--disabled .location-dropdown__input,
+.transfer-line--disabled .calendar-input,
+.transfer-line--disabled .pax-selector__input {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1));
+}
+
+.transfer-line--disabled .location-dropdown__label,
+.transfer-line--disabled .location-dropdown__label p,
+.transfer-line--disabled .location-dropdown__input-text,
+.transfer-line--disabled .location-dropdown__input-icon,
+.transfer-line--disabled .location-dropdown__input-chevron,
+.transfer-line--disabled .calendar-input__field,
+.transfer-line--disabled .calendar-input__icon-button,
+.transfer-line--disabled .calendar-input__chevron,
+.transfer-line--disabled .pax-selector__input-icon,
+.transfer-line--disabled .pax-selector__input-text,
+.transfer-line--disabled .pax-selector__chevron,
+.transfer-line--disabled .pax-selector__label {
+  font-weight: 400 !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1)) !important;
 }

package/dist/styles/mautourco.css

@@ -10,6 +10,7 @@
 @import "./components/forms.css";
 @import "./components/illustration.css";
 @import "./components/molecule/accomodation-docket.css";
+@import "./components/molecule/age-selector.css";
 @import "./components/molecule/calendarInput.css";
 @import "./components/molecule/dateTime.css";
 @import "./components/molecule/docket-prices.css";

package/package.json

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

package/src/components/atoms/Inputs/Input/Input.tsx

@@ -56,7 +56,7 @@ const Input: React.FC<InputProps> = ({
         placeholder={placeholder}
         value={value}
         disabled={disabled || variant === 'disabled'}
-        onChange={onChange}
+        onInput={onChange}
         onFocus={onFocus}
         onBlur={onBlur}
       />