mautourco-components 0.2.7 → 0.2.9

package/src/styles/components/molecule/service-selector.css

@@ -0,0 +1,228 @@
+/* Service Selector Component Styles */
+
+.service-selector {
+  position: relative;
+  width: 100%;
+}
+
+/* Trigger Button */
+.service-selector__trigger {
+  width: 100%;
+  padding: var(--service-selector-spacing-service-selector-padding-y, 12px) var(--service-selector-spacing-service-selector-padding-x, 24px);
+  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
+  border: var(--service-selector-border-width-default, 1px) solid var(--service-selector-color-service-selector-border-default, #a3a3a3);
+  border-radius: var(--border-radius-rounded-xl, 12px);
+  opacity: var(--opacity-opacity-100, 1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--service-selector-spacing-service-selector-gap, 40px);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  /* Website/Light/Level 1 */
+  box-shadow: var(--spacing-base-0, 0px) var(--spacing-base-0, 0px) var(--backdrop-blur-backdrop-blur-sm, 4px) var(--spacing-base-0, 0px) rgba(48, 54, 66, 0.11), var(--spacing-base-0, 0px) var(--spacing-base-0-5, 2px) var(--backdrop-blur-backdrop-blur-xs, 2px) var(--spacing-base-0, 0px) rgba(48, 54, 66, 0.10);
+}
+
+.service-selector__trigger:hover:not(:disabled):not(.service-selector__trigger--selected) {
+  background-color: var(--service-selector-color-service-selector-background-hover, #ccfbf6);
+  border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
+}
+
+.service-selector__trigger-content {
+  display: flex;
+  align-items: center;
+  gap: var(--service-selector-spacing-dropdown-item-gap, 12px);
+  flex: 1;
+  min-width: 0;
+}
+
+.service-selector__trigger-icon {
+  flex-shrink: 0;
+  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+}
+
+.service-selector__trigger-text {
+  flex-shrink: 0;
+  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+}
+
+.service-selector__trigger-chevron {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+}
+
+.service-selector__trigger-chevron svg {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center;
+}
+
+/* Trigger States */
+.service-selector__trigger--default {
+  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
+  border-color: var(--service-selector-color-service-selector-border-default, #a3a3a3);
+}
+
+.service-selector__trigger--default .service-selector__trigger-icon,
+.service-selector__trigger--default .service-selector__trigger-text,
+.service-selector__trigger--default .service-selector__trigger-chevron {
+  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+}
+
+.service-selector__trigger--open {
+  border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
+}
+
+/* Selected state - same style as default */
+.service-selector__trigger.service-selector__trigger--selected {
+  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
+  border-color: var(--service-selector-color-service-selector-border-default, #a3a3a3);
+}
+
+.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-icon,
+.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-text,
+.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-chevron {
+  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+}
+
+/* When dropdown is open AND a service is selected, keep default style */
+.service-selector__trigger.service-selector__trigger--selected:hover {
+  background-color: var(--service-selector-color-service-selector-background-hover, #ccfbf6);
+  border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
+}
+
+.service-selector__trigger--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.service-selector__trigger--disabled .service-selector__trigger-icon,
+.service-selector__trigger--disabled .service-selector__trigger-chevron {
+  color: var(--color-neutral-400, #a3a3a3);
+}
+
+/* Dropdown Panel */
+.service-selector__panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 8px;
+  background-color: var(--color-elevation-level-1, #ffffff);
+  border-radius: var(--service-selector-boder-radius-dropdown-item-default, 12px);
+  overflow: hidden;
+  z-index: 50;
+  border: var(--service-selector-border-width-default, 1px) solid var(--service-selector-color-service-selector-border-default, #a3a3a3);
+  box-shadow: 0px 0px 4px 0px rgba(48, 54, 66, 0.11), 0px 0px 2px 0px rgba(48, 54, 66, 0.1);
+}
+
+.service-selector__content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: #9ca3af #f3f4f6;
+}
+
+.service-selector__content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.service-selector__content::-webkit-scrollbar-track {
+  background: #f3f4f6;
+  border-radius: 3px;
+}
+
+.service-selector__content::-webkit-scrollbar-thumb {
+  background: #9ca3af;
+  border-radius: 3px;
+}
+
+.service-selector__options-wrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+}
+
+/* Option */
+.service-selector__option {
+  width: 100%;
+  padding: var(--service-selector-spacing-dropdown-item-padding-y, 12px) var(--service-selector-spacing-dropdown-item-padding-x, 24px);
+  display: flex;
+  align-items: center;
+  gap: var(--service-selector-spacing-dropdown-item-gap, 12px);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  border: 0;
+  background-color: var(--service-selector-color-dropdown-item-background-default, transparent);
+  text-align: left;
+  border-radius: var(--service-selector-boder-radius-dropdown-item-default, 12px);
+}
+
+.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected) {
+  background-color: var(--service-selector-color-dropdown-item-background-hover, #f5f5f5);
+}
+
+.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected) .service-selector__option-icon,
+.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected) .service-selector__option-text {
+  color: var(--service-selector-color-dropdown-item-foreground-hover, #404040);
+}
+
+.service-selector__option--selected {
+  background-color: var(--service-selector-color-dropdown-item-background-active, #042c2f);
+}
+
+.service-selector__option--selected:hover {
+  background-color: var(--service-selector-color-dropdown-item-background-active, #042c2f);
+}
+
+.service-selector__option--selected .service-selector__option-icon,
+.service-selector__option--selected .service-selector__option-text {
+  color: var(--service-selector-color-dropdown-item-foreground-active, #ffffff);
+}
+
+.service-selector__option--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.service-selector__option--disabled:hover {
+  background-color: transparent;
+}
+
+.service-selector__option-icon {
+  flex-shrink: 0;
+  color: var(--service-selector-color-dropdown-item-foreground-default, #737373);
+}
+
+.service-selector__option-icon--selected {
+  color: var(--service-selector-color-dropdown-item-foreground-active, #ffffff);
+}
+
+.service-selector__option-text {
+  flex: 1;
+  color: var(--service-selector-color-dropdown-item-foreground-default, #737373);
+}
+
+.service-selector__option-badge {
+  padding: 2px 8px;
+  border-radius: var(--service-selector-boder-radius-dropdown-item-pill, 9999px);
+  font-size: 12px;
+  font-weight: 700;
+  margin-left: auto;
+  background-color: var(--color-brand-primary, #fe8839);
+  color: var(--color-text-inverted, #ffffff);
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .service-selector__trigger {
+    padding: 10px 16px;
+  }
+
+  .service-selector__option {
+    padding: 10px 16px;
+  }
+}
+

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

@@ -147,11 +147,7 @@
 }
 
 .pax-selector__stepper-label {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-text-default, #262626);
+  /* La couleur est maintenant gérée par la prop color="default" du composant Text */
 }
 
 .pax-selector__stepper-controls {
@@ -573,11 +569,7 @@
 }
 
 .pax-selector__age-section-title {
-  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: 16px;
-  line-height: 24px;
-  color: var(--color-text-default, #262626);
+  /* La couleur est maintenant gérée par la prop color="default" du composant Text */
   margin: 0;
 }
 
@@ -625,11 +617,7 @@
 }
 
 .pax-selector__room-name {
-  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: 18px;
-  line-height: 24px;
-  color: var(--color-text-accent, #0f7173);
+  /* La couleur est maintenant gérée par la prop color="accent" du composant Text */
   margin: 0;
 }
 

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

@@ -10,10 +10,6 @@
   @apply flex items-center justify-between w-full;
 }
 
-.search-bar-transfer__title {
-  color: var(--color-text-accent, #0f7173);
-}
-
 /* Mode Selector (Segmented Button) */
 .search-bar-transfer__mode-selector {
   @apply flex items-center;
@@ -24,9 +20,7 @@
   @apply flex items-center justify-between w-full;
 }
 
-.search-bar-transfer__transfer-type-label {
-  color: var(--color-text-subtle);
-}
+/* La couleur est maintenant gérée par la prop color="subtle" du composant Text */
 
 .search-bar-transfer__add-buttons {
   @apply flex gap-2;
@@ -40,7 +34,7 @@
 /* Category Header */
 .search-bar-transfer__category-header {
   @apply flex items-center gap-2;
-  color: var(--color-text-default);
+  /* La couleur du texte est maintenant gérée par la prop color="default" du composant Text */
 }
 
 /* Divider between categories */
@@ -95,8 +89,8 @@
     @apply flex-col items-start gap-4;
   }
 
-  .search-bar-transfer__title {
-    /* Responsive: Utiliser les tokens heading-sm (24px) sur mobile */
+  /* Responsive: Réduire la taille du titre sur mobile */
+  .search-bar-transfer__header .heading-md {
     font-size: var(--font-size-text-2xl, 24px);
     line-height: var(--font-leading-leading-2xl, 36px);
   }

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

@@ -38,9 +38,7 @@
   color: var(--checkbox-color-checkbox-checked-default, #0f7173);
 }
 
-.rating-tab__label {
-  color: var(--color-text-default, #262626);
-}
+/* La couleur est maintenant gérée par la prop color="default" du composant Text */
 
 /* States */
 

package/src/components/atoms/Icon/icons/ChevronDownIcon.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-interface ChevronDownIconProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-  color?: string;
-}
-
-const ChevronDownIcon: React.FC<ChevronDownIconProps> = ({
-  size = 'md',
-  className = '',
-  color
-}) => {
-  const getSizeClasses = () => {
-    switch (size) {
-      case 'xs': return 'w-3 h-3';
-      case 'sm': return 'w-4 h-4';
-      case 'md': return 'w-5 h-5';
-      case 'lg': return 'w-6 h-6';
-      case 'xl': return 'w-8 h-8';
-      default: return 'w-5 h-5';
-    }
-  };
-
-  const sizeClasses = getSizeClasses();
-  const colorClass = color ? `text-${color}` : 'text-current';
-  const classes = `${sizeClasses} ${colorClass} ${className}`;
-
-  return (
-    <svg
-      className={classes}
-      viewBox="0 0 15 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12.4707 0.571533H2.07621C0.87817 0.571533 0.163582 1.90675 0.828137 2.90358L6.02536 10.6994C6.6191 11.59 7.92778 11.59 8.52151 10.6994L13.7187 2.90358C14.3833 1.90675 13.6687 0.571533 12.4707 0.571533Z"
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth="1.14286"
-      />
-    </svg>
-  );
-};
-
-export default ChevronDownIcon;