mautourco-components 0.2.46 → 0.2.47

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.46",
+  "version": "0.2.47",
   "private": false,
   "description": "Bibliothèque de composants Motorco pour le redesign",
   "main": "dist/index.js",

package/src/components/molecules/AgeSelector/AgeSelector.tsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useRef, useState } from 'react';
+import '../../../styles/components/molecule/age-selector.css';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+
+export interface AgeSelectorProps {
+  /** Label for the selector */
+  label: string;
+  /** Current selected age value */
+  value: number | undefined;
+  /** Callback when age changes */
+  onChange: (age: number) => void;
+  /** Available age range */
+  ageRange: number[];
+  /** Whether the field is required */
+  required?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Placeholder text */
+  placeholder?: string;
+}
+
+const AgeSelector: React.FC<AgeSelectorProps> = ({
+  label,
+  value,
+  onChange,
+  ageRange,
+  required = false,
+  className = '',
+  placeholder = '--',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState<string>(
+    value !== undefined ? value.toString() : ''
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync input value when prop value changes
+  useEffect(() => {
+    setInputValue(value !== undefined ? value.toString() : '');
+  }, [value]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+
+    // Only allow numeric input or empty string
+    if (newValue === '' || /^\d+$/.test(newValue)) {
+      setInputValue(newValue);
+
+      // Only update if it's a valid number within range
+      const numValue = parseInt(newValue, 10);
+      if (newValue === '') {
+        // Allow empty input - don't update onChange
+        return;
+      } else if (!isNaN(numValue) && ageRange.includes(numValue)) {
+        onChange(numValue);
+      }
+    }
+  };
+
+  const handleInputBlur = () => {
+    // Validate and set to valid value or clear if invalid
+    const numValue = parseInt(inputValue, 10);
+    if (inputValue === '') {
+      // Keep empty if user cleared it
+      return;
+    } else if (isNaN(numValue) || !ageRange.includes(numValue)) {
+      // Reset to current value if invalid
+      setInputValue(value !== undefined ? value.toString() : '');
+    } else {
+      // Ensure the input value matches the validated value
+      setInputValue(numValue.toString());
+    }
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      inputRef.current?.blur();
+    }
+  };
+
+  const handleSelect = (age: string) => {
+    const numAge = parseInt(age, 10);
+    onChange(numAge);
+    setIsOpen(false);
+    setInputValue(age);
+  };
+
+  const handleDropdownToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const ageOptions = ageRange.map((age) => age.toString());
+
+  return (
+    <div className={`age-selector ${className}`} ref={containerRef}>
+      <Text size="sm" variant="regular" className="age-selector__label">
+        {label}
+        {required && <span className="age-selector__required"> *</span>}
+      </Text>
+      <div className="age-selector__container">
+        <div
+          className={`age-selector__input ${isOpen ? 'age-selector__input--open' : ''} ${value !== undefined ? 'age-selector__input--selected' : 'age-selector__input--default'}`}>
+          <input
+            ref={inputRef}
+            type="text"
+            inputMode="numeric"
+            className="age-selector__input-field"
+            value={inputValue}
+            onChange={handleInputChange}
+            onBlur={handleInputBlur}
+            onKeyDown={handleInputKeyDown}
+            onFocus={() => setIsOpen(false)}
+            placeholder={placeholder}
+            aria-label={`${label} age`}
+          />
+          <button
+            type="button"
+            className="age-selector__dropdown-btn"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleDropdownToggle();
+            }}
+            aria-expanded={isOpen}
+            aria-haspopup="listbox"
+            aria-label="Open age dropdown">
+            <Icon
+              name="chevron-down"
+              size="sm"
+              className={`age-selector__icon ${isOpen ? 'age-selector__icon--open' : ''}`}
+            />
+          </button>
+        </div>
+        {isOpen && (
+          <div className="age-selector__dropdown" role="listbox">
+            {ageOptions.map((age) => (
+              <div
+                key={age}
+                className={`age-selector__option ${value?.toString() === age ? 'age-selector__option--selected' : ''}`}
+                onClick={() => handleSelect(age)}
+                role="option"
+                aria-selected={value?.toString() === age}>
+                {age}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AgeSelector;

package/src/components/molecules/LocationDropdown/LocationDropdown.tsx

@@ -189,7 +189,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   return (
     <div
       ref={dropdownRef}
-      className={`location-dropdown location-dropdown--${type} ${className}`}>
+      className={`location-dropdown location-dropdown--${type} ${disabled ? 'location-dropdown--disabled' : ''} ${className}`}>
       {label && (
         <div className="location-dropdown__label">
           <Text size="sm" variant="medium">