mautourco-components 0.2.8 → 0.2.10

package/src/styles/components/molecule/location-dropdown.css

@@ -171,6 +171,35 @@
   @apply text-[var(--color-atoll-green-800)] font-semibold;
 }
 
+/* Skeleton Loading States */
+.location-dropdown__option--skeleton {
+  @apply cursor-default pointer-events-none;
+}
+
+.location-dropdown__option--skeleton:hover {
+  @apply bg-transparent;
+}
+
+.location-dropdown__skeleton-icon {
+  @apply w-4 h-4 rounded bg-[var(--color-neutral-200)] flex-shrink-0;
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.location-dropdown__skeleton-text {
+  @apply h-4 flex-1 rounded bg-[var(--color-neutral-200)];
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+  animation-delay: 0.15s;
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
 /* Type-specific adjustments */
 .location-dropdown--airport-port .location-dropdown__content {
   @apply max-h-[auto];

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/typography.css

@@ -1,3 +1,7 @@
+:root {
+  --color-text-yellow: var(--color-yellow-600);
+}
+
 .heading-3xl {
   margin: 0;
   color: var(--color-text-default, #262626);

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;