mautourco-components 0.2.4 → 0.2.7

package/src/styles/components/organism/topnavigation.css

@@ -1,162 +1,162 @@
-.header {
-    @apply flex md:justify-between w-full h-[4.5rem] px-4 lg:px-24 shadow-[0_3px_8px_#00000040] sm:justify-start gap-[1.375rem];
-}
-
-.header-logo {
-    @apply flex flex-col justify-center h-full;
-}
-
-.header-nav {
-    @apply flex items-center justify-end w-auto;
-}
-
-.header-nav__items {
-    @apply flex items-stretch h-full;
-}
-
-.header__item {
-    @apply min-w-[8.1875rem] flex justify-center h-full items-center;
-    font-weight: var(--typography-font-weight-regular);
-    font-style: Regular;
-    font-size: var(--typography-font-size-base);
-
-    &:hover:not(:has(button)) {
-        @apply bg-[var(--color-elevation-state-hover-subtle)];
-    }
-
-    &:active {
-        @apply bg-[var(--color-elevation-state-pressed-subtle)]
-    }
-
-}
-
-.header__item--active {
-    @apply lg:border-b-4 lg:border-l-0 border-l-4 border-[var(--color-sandy-brown-500)] text-[var(--color-text-brand)];
-    font-weight: var(--typography-body-lg-6-font-weight-bold);
-
-    * {
-        @apply text-[var(--color-text-brand)];
-    }
-}
-
-.header-logo__link {
-    @apply inline-flex items-center gap-2;
-}
-
-.header-logo__image {
-    @apply w-auto h-6 md:h-7;
-}
-
-.header__item__link {
-    @apply block px-1 py-1 transition-colors;
-}
-
-.header-nav__user-section {
-    @apply flex items-center h-full gap-3 pl-8;
-}
-
-.header-nav__user-connected-section {
-    @apply border-l border-l-[var(--color-surface-300)]
-}
-
-.header-nav__user-container {
-    @apply flex items-center h-full;
-}
-
-/* ===== Mobile Nav Classes ===== */
-
-.header-logo__link {
-    @apply inline-flex items-center gap-2;
-}
-
-.header-logo__image-mobile {
-    @apply w-auto h-6;
-}
-
-.header-login-button {
-    @apply hidden rounded-full bg-teal-600 px-4 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 md:inline-block;
-}
-
-.header-user-actions {
-    @apply flex items-center gap-3;
-}
-
-.mobile-nav__backdrop {
-    @apply fixed inset-0 z-40 transition-opacity bg-black/40;
-}
-
-.mobile-nav__backdrop--open {
-    @apply opacity-100 pointer-events-auto;
-}
-
-.mobile-nav__backdrop--closed {
-    @apply opacity-0 pointer-events-none;
-}
-
-.mobile-nav__sheet {
-    @apply fixed left-0 top-0 z-50 h-dvh w-[84vw] max-w-[360px] bg-white shadow-xl border-r border-black/10 transition-transform duration-300 flex flex-col;
-}
-
-.mobile-nav__sheet--open {
-    @apply translate-x-0;
-}
-
-.mobile-nav__sheet--closed {
-    @apply -translate-x-full;
-}
-
-.mobile-nav__header {
-    @apply flex flex-col items-start justify-between px-4 pb-4 border-b border-black/10;
-
-    & >:first-child {
-        @apply flex justify-end w-full;
-    }
-
-    & >:last-child {
-        @apply flex justify-start w-full;
-    }
-}
-
-.mobile-nav__close-button {
-    @apply inline-flex items-center justify-center rounded-full size-9 hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-black/20;
-}
-
-.mobile-nav__content {
-    @apply flex-1 overflow-y-auto;
-}
-
-.mobile-nav__list {
-    @apply py-2;
-}
-
-.mobile-nav__item-button {
-    @apply w-full px-4 py-3 text-sm text-left;
-}
-
-.mobile-nav__footer {
-    @apply p-4 border-t border-black/10;
-}
-
-.mobile-nav__user-info {
-    @apply flex items-center justify-between;
-}
-
-.mobile-nav__user-text {
-    @apply text-sm;
-}
-
-.mobile-nav__user-name {
-    @apply font-medium text-black;
-}
-
-.mobile-nav__user-agency {
-    @apply text-black/60;
-}
-
-.mobile-nav__logout-button {
-    @apply rounded-full px-4 py-1.5 text-sm font-medium border border-black/10 hover:bg-black/5;
-}
-
-.mobile-nav__login-button {
-    @apply w-full px-4 py-2 text-sm font-medium text-white transition bg-teal-600 rounded-full shadow-sm hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500;
+.header {
+    @apply flex md:justify-between w-full h-[4.5rem] px-4 lg:px-24 shadow-[0_3px_8px_#00000040] sm:justify-start gap-[1.375rem];
+}
+
+.header-logo {
+    @apply flex flex-col justify-center h-full;
+}
+
+.header-nav {
+    @apply flex items-center justify-end w-auto;
+}
+
+.header-nav__items {
+    @apply flex items-stretch h-full;
+}
+
+.header__item {
+    @apply min-w-[8.1875rem] flex justify-center h-full items-center;
+    font-weight: var(--typography-font-weight-regular);
+    font-style: Regular;
+    font-size: var(--typography-font-size-base);
+
+    &:hover:not(:has(button)) {
+        @apply bg-[var(--color-elevation-state-hover-subtle)];
+    }
+
+    &:active {
+        @apply bg-[var(--color-elevation-state-pressed-subtle)]
+    }
+
+}
+
+.header__item--active {
+    @apply lg:border-b-4 lg:border-l-0 border-l-4 border-[var(--color-sandy-brown-500)] text-[var(--color-text-brand)];
+    font-weight: var(--typography-body-lg-6-font-weight-bold);
+
+    *:not(button) {
+        @apply text-[var(--color-text-brand)];
+    }
+}
+
+.header-logo__link {
+    @apply inline-flex items-center gap-2;
+}
+
+.header-logo__image {
+    @apply w-auto h-6 md:h-7;
+}
+
+.header__item__link {
+    @apply block px-1 py-1 transition-colors;
+}
+
+.header-nav__user-section {
+    @apply flex items-center h-full gap-3 pl-8;
+}
+
+.header-nav__user-connected-section {
+    @apply border-l border-l-[var(--color-surface-300)]
+}
+
+.header-nav__user-container {
+    @apply flex items-center h-full;
+}
+
+/* ===== Mobile Nav Classes ===== */
+
+.header-logo__link {
+    @apply inline-flex items-center gap-2;
+}
+
+.header-logo__image-mobile {
+    @apply w-auto h-6;
+}
+
+.header-login-button {
+    @apply hidden rounded-full bg-teal-600 px-4 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 md:inline-block;
+}
+
+.header-user-actions {
+    @apply flex items-center gap-3;
+}
+
+.mobile-nav__backdrop {
+    @apply fixed inset-0 z-40 transition-opacity bg-black/40;
+}
+
+.mobile-nav__backdrop--open {
+    @apply opacity-100 pointer-events-auto;
+}
+
+.mobile-nav__backdrop--closed {
+    @apply opacity-0 pointer-events-none;
+}
+
+.mobile-nav__sheet {
+    @apply fixed left-0 top-0 z-50 h-dvh w-[84vw] max-w-[360px] bg-white shadow-xl border-r border-black/10 transition-transform duration-300 flex flex-col;
+}
+
+.mobile-nav__sheet--open {
+    @apply translate-x-0;
+}
+
+.mobile-nav__sheet--closed {
+    @apply -translate-x-full;
+}
+
+.mobile-nav__header {
+    @apply flex flex-col items-start justify-between px-4 pb-4 border-b border-black/10;
+
+    & >:first-child {
+        @apply flex justify-end w-full;
+    }
+
+    & >:last-child {
+        @apply flex justify-start w-full;
+    }
+}
+
+.mobile-nav__close-button {
+    @apply inline-flex items-center justify-center rounded-full size-9 hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-black/20;
+}
+
+.mobile-nav__content {
+    @apply flex-1 overflow-y-auto;
+}
+
+.mobile-nav__list {
+    @apply py-2;
+}
+
+.mobile-nav__item-button {
+    @apply w-full px-4 py-3 text-sm text-left;
+}
+
+.mobile-nav__footer {
+    @apply p-4 border-t border-black/10;
+}
+
+.mobile-nav__user-info {
+    @apply flex items-center justify-between;
+}
+
+.mobile-nav__user-text {
+    @apply text-sm;
+}
+
+.mobile-nav__user-name {
+    @apply font-medium text-black;
+}
+
+.mobile-nav__user-agency {
+    @apply text-black/60;
+}
+
+.mobile-nav__logout-button {
+    @apply rounded-full px-4 py-1.5 text-sm font-medium border border-black/10 hover:bg-black/5;
+}
+
+.mobile-nav__login-button {
+    @apply w-full px-4 py-2 text-sm font-medium text-white transition bg-teal-600 rounded-full shadow-sm hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500;
 }

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

@@ -1,86 +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)];
-}
+/* 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

@@ -1,39 +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);
-}
-
-
+.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);
+}
+
+