mautourco-components 0.2.46 → 0.2.48

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

@@ -88,6 +88,30 @@
   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 {
   position: absolute;
@@ -393,184 +417,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 {
   display: flex;
@@ -585,16 +431,9 @@
 }
 
 .pax-selector__age-groups {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+    @apply flex flex-wrap gap-4;
 }
 
-.pax-selector__age-row {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
-}
 
 /* Multiple Rooms Styles */
 .pax-selector__rooms {

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

@@ -87,4 +87,35 @@
 
 .transfer-line__date-picker {
   @apply h-11;
+}
+
+/* Disabled state */
+.transfer-line--disabled {
+  @apply pointer-events-none;
+}
+
+.transfer-line--disabled .transfer-line__field-label {
+  @apply text-[#a3a3a3] font-normal;
+}
+
+/* Match Figma design colors for disabled inputs */
+.transfer-line--disabled .location-dropdown__input,
+.transfer-line--disabled .calendar-input,
+.transfer-line--disabled .pax-selector__input {
+  @apply bg-[#fbfbfb] border-[#d1d5db];
+}
+
+.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 {
+  @apply text-[#a3a3a3] font-normal !important;
 }