mautourco-components 0.1.2 → 0.2.1

package/src/styles/components/organism/round-trip.css

@@ -0,0 +1,55 @@
+/* RoundTrip Component Styles */
+
+.round-trip {
+  @apply w-full;
+}
+
+.round-trip__content {
+  @apply flex gap-2 flex-wrap w-full;
+}
+
+/* Field containers */
+.round-trip__field {
+  @apply flex-1 min-w-0 flex flex-col gap-2;
+}
+
+.round-trip__field p {
+  @apply leading-5;
+}
+
+
+.round-trip__field-label {
+  @apply text-[var(--color-neutral-800)] text-sm font-normal;
+  line-height: 20px; /* Matches other label styles */
+}
+
+/* Responsive layout for mobile */
+@media (max-width: 768px) {
+  .round-trip__row {
+    @apply flex-col;
+    gap: 12px;
+  }
+
+  .round-trip__field--pax,
+  .round-trip__field--dates,
+  .round-trip__field--pickup-dropoff,
+  .round-trip__field--accommodation {
+    @apply w-full;
+    flex: 1 1 100%;
+  }
+}
+
+/* Tablet layout */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .round-trip__row--first {
+    @apply flex-wrap;
+  }
+
+  .round-trip__field--pax {
+    flex: 0 0 calc(50% - 6px);
+  }
+
+  .round-trip__field--dates {
+    flex: 0 0 calc(50% - 6px);
+  }
+}

package/src/styles/components/organism/search-bar-transfer.css

@@ -0,0 +1,128 @@
+/* SearchBarTransfer Component Styles */
+
+.search-bar-transfer {
+  @apply w-full bg-white border border-[var(--color-border-subtle)] rounded-3xl p-8 flex flex-col gap-8;
+  box-shadow: var(--spacing-base-0, 0) var(--spacing-base-0, 0) var(--backdrop-blur-backdrop-blur-sm, 4px) var(--spacing-base-0, 0) rgba(48, 54, 66, 0.11), var(--spacing-base-0, 0) var(--spacing-base-05, 2px) var(--backdrop-blur-backdrop-blur-xs, 2px) var(--spacing-base-0, 0) rgba(48, 54, 66, 0.10);
+}
+
+/* Header */
+.search-bar-transfer__header {
+  @apply flex items-center justify-between w-full;
+}
+
+.search-bar-transfer__title {
+  @apply text-[var(--color-text-accent)] font-bold text-3xl leading-9;
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+}
+
+/* Mode Selector (Segmented Button) */
+.search-bar-transfer__mode-selector {
+  @apply flex items-center;
+}
+
+/* Transfer Type Selector */
+.search-bar-transfer__transfer-type {
+  @apply flex items-center justify-between w-full;
+}
+
+.search-bar-transfer__transfer-type-label {
+  color: var(--color-text-subtle);
+}
+
+.search-bar-transfer__add-buttons {
+  @apply flex gap-2;
+}
+
+/* Transfer Lines */
+.search-bar-transfer__transfer-lines {
+  @apply flex flex-col gap-8 w-full;
+}
+
+/* Category Header */
+.search-bar-transfer__category-header {
+  @apply flex items-center gap-2;
+  color: var(--color-text-default);
+}
+
+/* Divider between categories */
+.search-bar-transfer__divider {
+  @apply w-full;
+  margin: var(--spacing-base-4, 16px) 0;
+}
+
+/* Actions (Bottom Section) */
+.search-bar-transfer__actions {
+  @apply flex items-center justify-between w-full;
+}
+
+.search-bar-transfer__cta {
+  @apply flex gap-4 items-center;
+}
+
+/* Error Toast */
+.search-bar-transfer__error {
+  @apply flex items-center overflow-hidden rounded border;
+  border-width: 1px;
+  border-color: var(--color-danger-600);
+  background-color: var(--color-danger-50);
+}
+
+.search-bar-transfer__error-bar {
+  @apply h-full;
+  width: 8px;
+  background-color: var(--color-danger-600);
+}
+
+.search-bar-transfer__error-content {
+  @apply flex items-center gap-2 p-3;
+}
+
+.search-bar-transfer__error-icon {
+  color: var(--color-danger-600);
+}
+
+.search-bar-transfer__error-text {
+  color: var(--color-danger-600);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .search-bar-transfer {
+    @apply p-6;
+    gap: 24px;
+  }
+
+  .search-bar-transfer__header {
+    @apply flex-col items-start gap-4;
+  }
+
+  .search-bar-transfer__title {
+    @apply text-2xl;
+  }
+
+  .search-bar-transfer__transfer-type {
+    @apply flex-col items-start gap-4;
+  }
+
+  .search-bar-transfer__add-buttons {
+    @apply flex-wrap w-full;
+  }
+
+  .search-bar-transfer__actions {
+    @apply flex-col items-start gap-4;
+  }
+
+  .search-bar-transfer__cta {
+    @apply flex-col w-full;
+  }
+
+  .search-bar-transfer__error {
+    @apply w-full;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .search-bar-transfer {
+    gap: 28px;
+  }
+}

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

@@ -0,0 +1,86 @@
+/* TransferLine Component Styles */
+
+.transfer-line {
+  @apply w-full flex flex-col gap-3;
+}
+
+/* Header with icon and label */
+.transfer-line__header {
+  @apply flex items-center gap-2;
+}
+
+.transfer-line__header-icon {
+  @apply text-[var(--color-neutral-800)];
+}
+
+.transfer-line__header-label {
+  @apply text-[var(--color-neutral-800)] font-medium text-base;
+}
+
+.transfer-line__content-container {
+  @apply flex gap-2 w-full;
+}
+
+/* Content area with all fields */
+.transfer-line__content {
+  @apply flex gap-2 w-full;
+}
+
+/* Field containers */
+.transfer-line__field {
+  @apply flex-1 min-w-0 flex flex-col gap-2;
+}
+
+.transfer-line__field p {
+  @apply leading-5;
+}
+
+/* Mobile layout - stack fields vertically */
+@media (max-width: 768px) {
+  .transfer-line__content {
+    @apply flex-col;
+  }
+
+  .transfer-line__field--pax,
+  .transfer-line__field--date,
+  .transfer-line__field--pickup,
+  .transfer-line__field--dropoff {
+    @apply w-full;
+    flex: 1 1 100%;
+  }
+
+  .transfer-line__delete {
+    @apply justify-center;
+  }
+}
+
+/* Tablet layout - 2 columns */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .transfer-line__content {
+    @apply flex-wrap;
+  }
+  
+  .transfer-line__field--pax,
+  .transfer-line__field--date,
+  .transfer-line__field--pickup,
+  .transfer-line__field--dropoff {
+    flex: 0 0 calc(50% - 0.25rem);
+  }
+}
+
+.transfer-line__field-label {
+  @apply text-[var(--color-neutral-800)] text-sm font-normal;
+}
+
+/* Delete button */
+.transfer-line__delete {
+  @apply flex items-end justify-end;
+}
+
+.transfer-line__delete-btn {
+  @apply flex items-center justify-center w-11 h-11 rounded-xl border border-[var(--color-neutral-200)] bg-[var(--color-neutral-100)] hover:bg-[var(--color-neutral-200)] hover:border-[var(--color-neutral-200)] transition-colors cursor-pointer;
+}
+
+.transfer-line__delete-icon {
+  @apply text-[var(--color-neutral-800)];
+}

package/src/styles/components/rating-star.css

@@ -0,0 +1,39 @@
+.rating-star {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--rating-star-spacing-gap, 4px);
+  padding: var(--rating-star-spacing-padding-y, 0px)
+    var(--rating-star-spacing-padding-x, 0px);
+  border-radius: var(--rating-star-border-radius-default, 0px);
+}
+
+.rating-star--interactive {
+  cursor: pointer;
+}
+
+.rating-star__button {
+  /* Reset button styles, visuals handled by the icon */
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: inherit;
+}
+
+.rating-star__button:disabled {
+  cursor: default;
+}
+
+.rating-star__icon {
+  font-size: 16px;
+  line-height: 1;
+  display: inline-block;
+  color: var(--rating-star-color-default, #d1d5db);
+}
+
+.rating-star__icon--selected {
+  color: var(--rating-star-color-selected, #ca8a04);
+}
+
+

package/src/styles/components/rating-tab.css

@@ -0,0 +1,83 @@
+.rating-tab {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--rating-tab-spacing-padding-y, 12px)
+    var(--rating-tab-spacing-padding-x, 16px);
+  border-radius: var(--rating-tab-border-radius-default, 12px);
+  border-width: var(--rating-tab-border-border, 1px);
+  border-style: solid;
+  background-color: var(--rating-tab-color-background-default, #ffffff);
+  border-color: var(--rating-tab-color-border-default, #a3a3a3);
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.rating-tab__left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.rating-tab__checkbox {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border: 1px solid var(--rating-tab-color-border-default, #a3a3a3);
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.rating-tab__checkbox-icon {
+  color: var(--checkbox-color-checkbox-checked-default, #0f7173);
+}
+
+.rating-tab__label {
+  color: var(--color-text-default, #262626);
+}
+
+/* States */
+
+.rating-tab--default:hover {
+  background-color: var(--rating-tab-color-background-hover, #d9d9d9);
+  border-color: var(--rating-tab-color-border-hover, #a3a3a3);
+}
+
+.rating-tab--active {
+  background-color: var(
+    --rating-tab-color-background-active,
+    #d9d9d9
+  );
+  border-color: var(--rating-tab-color-border-active, #a3a3a3);
+}
+
+.rating-tab:focus-visible {
+  outline: 2px solid var(--rating-tab-color-border-focused, #a3a3a3);
+  outline-offset: 2px;
+  background-color: var(
+    --rating-tab-color-background-focused,
+    #d9d9d9
+  );
+}
+
+.rating-tab--disabled {
+  background-color: var(
+    --rating-tab-color-background-disabled,
+    #fbfbfb
+  );
+  border-color: var(--rating-tab-color-border-disabled, #d1d5db);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.rating-tab--disabled .rating-tab__checkbox-icon {
+  opacity: 0.6;
+}
+
+

package/src/styles/components/segmented-button.css

@@ -0,0 +1,134 @@
+.segmented-button {
+  display: inline-flex;
+  position: relative;
+  background: transparent;
+}
+
+.segmented-button--horizontal {
+  flex-direction: row;
+  align-items: stretch;
+  gap: var(--segmented-button-spacing-container-gap, 0rem);
+  padding: var(--segmented-button-spacing-container-padding-y, 0rem)
+    var(--segmented-button-spacing-container-padding-x, 0rem);
+}
+
+.segmented-button--vertical {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--segmented-button-spacing-container-gap, 0rem);
+  padding: var(--segmented-button-spacing-container-padding-y, 0rem)
+    var(--segmented-button-spacing-container-padding-x, 0rem);
+}
+
+.segmented-button__item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--segmented-button-spacing-content-gap, 4rem);
+  padding: var(--segmented-button-spacing-content-padding-y, 8rem)
+    var(--segmented-button-spacing-content-padding-x, 12rem);
+  background-color: var(--segmented-button-color-background-default, #fafafa);
+  color: var(--segmented-button-color-foreground-default, #303642);
+  border: var(--segmented-button-border-width-default, 0.5rem) solid
+    var(--segmented-button-color-border-default, #a3a3a3);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-weight: var(--font-weight-font-bold, 700);
+  font-size: var(--font-size-text-sm, 14rem);
+  line-height: calc(var(--font-leading-leading-sm, 20)* 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+/* Horizontal layout - remove border radius from middle items */
+.segmented-button--horizontal .segmented-button__item {
+  margin-right: calc(var(--segmented-button-border-width-default, 0.5rem)* -1);
+  border-radius: 0;
+}
+
+.segmented-button--horizontal .segmented-button__item--first {
+  border-top-left-radius: var(--segmented-button-border-radius-border, 6rem);
+  border-bottom-left-radius: var(--segmented-button-border-radius-border, 6rem);
+}
+
+.segmented-button--horizontal .segmented-button__item--last {
+  margin-right: 0;
+  border-top-right-radius: var(--segmented-button-border-radius-border, 6rem);
+  border-bottom-right-radius: var(--segmented-button-border-radius-border, 6rem);
+}
+
+/* Vertical layout - remove border radius from middle items */
+.segmented-button--vertical .segmented-button__item {
+  margin-bottom: calc(var(--segmented-button-border-width-default, 0.5rem)* -1);
+  border-radius: 0;
+}
+
+.segmented-button--vertical .segmented-button__item--first {
+  border-top-left-radius: var(--segmented-button-border-radius-border, 6rem);
+  border-top-right-radius: var(--segmented-button-border-radius-border, 6rem);
+}
+
+.segmented-button--vertical .segmented-button__item--last {
+  margin-bottom: 0;
+  border-bottom-left-radius: var(--segmented-button-border-radius-border, 6rem);
+  border-bottom-right-radius: var(--segmented-button-border-radius-border, 6rem);
+}
+
+/* Hover state */
+.segmented-button__item:hover:not(.segmented-button__item--selected):not(:disabled) {
+  background-color: var(--segmented-button-color-background-hover, #e5e5e5);
+  color: var(--segmented-button-color-foreground-hover, #303642);
+  border-color: var(--segmented-button-color-border-hover, #a3a3a3);
+}
+
+/* Focus state */
+.segmented-button__item:focus-visible:not(:disabled) {
+  outline: none;
+  background-color: var(--segmented-button-color-background-focus, #fafafa);
+  color: var(--segmented-button-color-foreground-focus, #303642);
+  border-color: var(--segmented-button-color-border-focus, #a3a3a3);
+  box-shadow: 0 0 0 2rem var(--segmented-button-color-border-focus, #a3a3a3);
+}
+
+/* Selected state */
+.segmented-button__item--selected {
+  background-color: var(--segmented-button-color-background-selected, #fe8839);
+  color: var(--segmented-button-color-foreground-selected, #ffffff);
+  border-color: var(--segmented-button-color-border-selected, #fe8839);
+  z-index: 1;
+}
+
+.segmented-button__item--selected:hover:not(:disabled) {
+  background-color: var(--segmented-button-color-background-selected, #fe8839);
+  color: var(--segmented-button-color-foreground-selected, #ffffff);
+  border-color: var(--segmented-button-color-border-selected, #fe8839);
+}
+
+/* Disabled state */
+.segmented-button__item:disabled,
+.segmented-button__item--disabled {
+  cursor: not-allowed;
+  background-color: var(--segmented-button-color-background-disabled, rgba(255, 255, 255, 0));
+  color: var(--segmented-button-color-foreground-disabled, #a3a3a3);
+  border-color: var(--segmented-button-color-border-disabled, #e5e5e5);
+  opacity: 0.6;
+}
+
+.segmented-button--disabled .segmented-button__item {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Label */
+.segmented-button__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/styles/components/selected-value.css

@@ -2,12 +2,12 @@
 .selected-value {
   display: inline-flex;
   align-items: center;
-  gap: var(--chip-spacing-gap);
-  padding: var(--chip-spacing-sm-padding-y) var(--chip-spacing-sm-padding-x);
-  border-radius: var(--chip-border-radius-pill);
+  gap: var(--chip-spacing-gap, 0.5rem);
+  padding: var(--chip-spacing-sm-padding-y, 0.375rem) var(--chip-spacing-sm-padding-x);
+  border-radius: var(--chip-border-radius-pill, 1.375rem);
   /* Typography is now handled by the Text component */
-  background: var(--chip-color-accent-filled-background);
-  color: var(--color-neutral-white);
+  background: var(--color-atoll-green-800);
+  color: var(--color-white);
   cursor: default;
   user-select: none;
   max-width: 200px;
@@ -19,7 +19,7 @@
 .selected-value--text {
   background: transparent;
   padding: 0;
-  color: var(--color-neutral-900);
+  color: var(--color-slate-900);
 }
 
 .selected-value__text {
@@ -49,32 +49,32 @@
 }
 
 .selected-value__remove:focus {
-  outline: 2px solid var(--color-primary-500);
+  outline: 2px solid var(--color-atoll-green-800);
   outline-offset: 1px;
 }
 
 .selected-value__remove-icon {
-  color: var(--color-neutral-white);
+  color: var(--color-white);
 }
 
 /* Size variants */
 .selected-value--xs {
-  padding: var(--chip-spacing-xs-padding-y) var(--chip-spacing-xs-padding-x);
-  gap: var(--chip-spacing-xs-gap);
+  padding: var(--chip-spacing-xs-padding-y, 0.25rem) var(--chip-spacing-xs-padding-x, 0.5rem);
+  gap: var(--chip-spacing-xs-gap, 0.25rem);
 }
 
 .selected-value--sm {
-  padding: var(--chip-spacing-sm-padding-y) var(--chip-spacing-sm-padding-x);
-  gap: var(--chip-spacing-sm-gap);
+  padding: var(--chip-spacing-sm-padding-y, 0.375rem) var(--chip-spacing-sm-padding-x, 0.75rem);
+  gap: var(--chip-spacing-sm-gap, 0.375rem);
 }
 
 .selected-value--md {
-  padding: var(--chip-spacing-md-padding-y) var(--chip-spacing-md-padding-x);
-  gap: var(--chip-spacing-md-gap);
+  padding: var(--chip-spacing-md-padding-y, 0.5rem) var(--chip-spacing-md-padding-x, 0.875rem);
+  gap: var(--chip-spacing-md-gap, 0.5rem);
 }
 
 .selected-value--lg {
-  padding: var(--chip-spacing-lg-padding-y) var(--chip-spacing-lg-padding-x);
-  gap: var(--chip-spacing-lg-gap);
+  padding: var(--chip-spacing-lg-padding-y, 0.625rem) var(--chip-spacing-lg-padding-x, 1rem);
+  gap: var(--chip-spacing-lg-gap, 0.625rem);
 }
 

package/src/styles/components/slider.css

@@ -0,0 +1,86 @@
+.slider-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+/**
+ * Base slider styles.
+ * Detailed visual styles (colors, sizes, radii) will be aligned
+ * with Figma using design tokens in a second step.
+ */
+.slider {
+  width: 100%;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+/* Track */
+.slider::-webkit-slider-runnable-track {
+  height: var(--slider-track-height, 4px);
+  border-radius: var(--slider-track-radius, 9999px);
+  background-color: var(
+    --slider-track-background,
+    var(--price-slider-color-slider-background-default, #e5e5e5)
+  );
+}
+
+.slider::-moz-range-track {
+  height: var(--slider-track-height, 4px);
+  border-radius: var(--slider-track-radius, 9999px);
+  background-color: var(
+    --slider-track-background,
+    var(--price-slider-color-slider-background-default, #e5e5e5)
+  );
+}
+
+/* Thumb */
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--slider-thumb-size, 16px);
+  height: var(--slider-thumb-size, 16px);
+  border-radius: 9999px;
+  background-color: var(
+    --slider-thumb-background,
+    var(--price-slider-color-slider-foreground-default, #0f7173)
+  );
+  border: var(--slider-thumb-border-width, 2px) solid
+    var(--slider-thumb-border-color, #ffffff);
+  margin-top: calc((var(--slider-track-height, 4px) - var(--slider-thumb-size, 16px)) / 2);
+}
+
+.slider::-moz-range-thumb {
+  width: var(--slider-thumb-size, 16px);
+  height: var(--slider-thumb-size, 16px);
+  border-radius: 9999px;
+  background-color: var(
+    --slider-thumb-background,
+    var(--price-slider-color-slider-foreground-default, #0f7173)
+  );
+  border: var(--slider-thumb-border-width, 2px) solid
+    var(--slider-thumb-border-color, #ffffff);
+}
+
+/* Variants (from Figma: Full / Half) */
+.slider--full {
+  --slider-track-background: var(
+    --slider-color-track-filled,
+    var(--price-slider-color-slider-foreground-default, #0f7173)
+  );
+}
+
+.slider--half {
+  --slider-track-background: var(
+    --slider-color-track-background,
+    var(--price-slider-color-slider-background-default, #e5e5e5)
+  );
+}
+
+.slider--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+