mautourco-components 0.2.4 → 0.2.7

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

@@ -1,204 +1,204 @@
-/* Location Dropdown Component Styles */
-
-.location-dropdown {
-  @apply relative w-full flex flex-col gap-2;
-}
-
-/* Label */
-.location-dropdown__label {
-  @apply text-[var(--color-neutral-800)] text-sm;
-}
-
-.location-dropdown__label p {
-  @apply leading-normal;
-}
-
-/* Input / Trigger */
-.location-dropdown__input {
-  @apply w-full h-11 px-3 py-2.5 bg-white border border-[var(--color-tuna-500)] rounded-xl flex items-center justify-between gap-2 cursor-pointer transition-all duration-200;
-}
-
-.location-dropdown__input:hover {
-  @apply border-[var(--color-neutral-800)];
-}
-
-.location-dropdown__input-content {
-  @apply flex items-center gap-2 flex-1 min-w-0;
-}
-
-.location-dropdown__input-icon {
-  @apply text-[var(--color-neutral-800)] flex-shrink-0;
-}
-
-.location-dropdown__input-icon--placeholder {
-  @apply text-[var(--color-neutral-400)];
-}
-
-.location-dropdown__input-text {
-  @apply text-sm leading-5 text-[var(--color-neutral-800)] font-medium truncate;
-}
-
-.location-dropdown__input-text--placeholder {
-  @apply text-[var(--color-neutral-400)] font-normal;
-}
-
-.location-dropdown__input-chevron {
-  @apply text-[var(--color-neutral-800)] flex-shrink-0 transition-transform duration-200;
-}
-
-/* Input States */
-.location-dropdown__input--default {
-  @apply border-[var(--color-tuna-500)];
-}
-
-.location-dropdown__input--open {
-  @apply border-[var(--color-neutral-800)] shadow-sm;
-}
-
-.location-dropdown__input--open .location-dropdown__input-chevron {
-  @apply !transform !rotate-180;
-}
-
-.location-dropdown__input--selected {
-  @apply border-[var(--color-tuna-500)];
-}
-
-.location-dropdown__input--error {
-  @apply border-[var(--color-coral-red-600)] bg-[var(--color-coral-red-50)];
-}
-
-.location-dropdown__input--error .location-dropdown__input-text {
-  @apply text-[var(--color-coral-red-600)];
-}
-
-.location-dropdown__input--error .location-dropdown__input-icon,
-.location-dropdown__input--error .location-dropdown__input-chevron {
-  @apply text-[var(--color-coral-red-600)];
-}
-
-.location-dropdown__input--disabled {
-  @apply bg-[var(--color-surface-50)] border-[var(--color-neutral-400)] cursor-not-allowed opacity-60;
-}
-
-.location-dropdown__input--disabled .location-dropdown__input-text,
-.location-dropdown__input--disabled .location-dropdown__input-icon,
-.location-dropdown__input--disabled .location-dropdown__input-chevron {
-  @apply text-[var(--color-neutral-400)];
-}
-
-/* Dropdown Panel */
-.location-dropdown__panel {
-  @apply absolute top-full left-0 right-0 mt-2 bg-white rounded-xl overflow-hidden z-50 w-[17.5rem] border border-[var(--color-neutral-200)];
-}
-
-.location-dropdown__content {
-  @apply overflow-y-auto overflow-x-hidden;
-  scrollbar-width: thin;
-  scrollbar-color: #9ca3af #f3f4f6;
-}
-
-.location-dropdown__content::-webkit-scrollbar {
-  @apply w-1.5;
-}
-
-.location-dropdown__content::-webkit-scrollbar-track {
-  @apply bg-[#f3f4f6] rounded;
-}
-
-.location-dropdown__content::-webkit-scrollbar-thumb {
-  @apply bg-[#9ca3af] rounded;
-}
-
-.location-dropdown__options-wrapper {
-  @apply flex flex-col gap-3 p-4;
-}
-
-/* Group */
-.location-dropdown__group {
-  @apply flex flex-col;
-}
-
-.location-dropdown__group-header {
-  @apply px-2 py-2 text-xs font-bold text-[var(--color-neutral-800)] uppercase tracking-wide;
-}
-
-.location-dropdown__divider {
-  @apply w-full h-px bg-[var(--color-neutral-200)] my-2;
-}
-
-.location-dropdown__group-options {
-  @apply flex flex-col gap-3;
-}
-
-/* Option Item */
-.location-dropdown__option {
-  @apply flex items-center gap-2 px-2 py-2 cursor-pointer transition-all duration-150 rounded-lg;
-}
-
-.location-dropdown__option:hover {
-  @apply bg-[var(--color-surface-50)];
-}
-
-.location-dropdown__option--selected {
-  @apply bg-[#f0fdfb] border-[0.5px] border-solid border-[#15b7b6];
-}
-
-.location-dropdown__option--selected:hover {
-  @apply bg-[#e6fcf9];
-}
-
-.location-dropdown__option--disabled {
-  @apply opacity-50 cursor-not-allowed;
-}
-
-.location-dropdown__option--disabled:hover {
-  @apply bg-transparent;
-}
-
-.location-dropdown__option-icon {
-  @apply text-[var(--color-neutral-800)] flex-shrink-0;
-}
-
-.location-dropdown__option--selected .location-dropdown__option-icon {
-  @apply text-[var(--color-atoll-green-800)];
-}
-
-.location-dropdown__option-text {
-  @apply text-sm leading-5 text-[var(--color-neutral-800)] font-medium flex-1 min-w-0;
-}
-
-.location-dropdown__option--selected .location-dropdown__option-text {
-  @apply text-[var(--color-atoll-green-800)] font-semibold;
-}
-
-/* Type-specific adjustments */
-.location-dropdown--airport-port .location-dropdown__content {
-  @apply max-h-[auto];
-}
-
-.location-dropdown--accommodation .location-dropdown__content {
-  @apply max-h-[240px];
-}
-
-.location-dropdown--pickup-dropoff .location-dropdown__content {
-  @apply max-h-[240px];
-}
-
-/* Responsive design */
-@media (max-width: 640px) {
-  .location-dropdown__input {
-    @apply px-2.5 py-2;
-  }
-
-  .location-dropdown__input-text {
-    @apply text-xs;
-  }
-
-  .location-dropdown__option {
-    @apply px-2 py-1.5;
-  }
-
-  .location-dropdown__option-text {
-    @apply text-xs;
-  }
-}
+/* Location Dropdown Component Styles */
+
+.location-dropdown {
+  @apply relative w-full flex flex-col gap-2;
+}
+
+/* Label */
+.location-dropdown__label {
+  @apply text-[var(--color-neutral-800)] text-sm;
+}
+
+.location-dropdown__label p {
+  @apply leading-normal;
+}
+
+/* Input / Trigger */
+.location-dropdown__input {
+  @apply w-full h-11 px-3 py-2.5 bg-white border border-[var(--color-tuna-500)] rounded-xl flex items-center justify-between gap-2 cursor-pointer transition-all duration-200;
+}
+
+.location-dropdown__input:hover {
+  @apply border-[var(--color-neutral-800)];
+}
+
+.location-dropdown__input-content {
+  @apply flex items-center gap-2 flex-1 min-w-0;
+}
+
+.location-dropdown__input-icon {
+  @apply text-[var(--color-neutral-800)] flex-shrink-0;
+}
+
+.location-dropdown__input-icon--placeholder {
+  @apply text-[var(--color-neutral-400)];
+}
+
+.location-dropdown__input-text {
+  @apply text-sm leading-5 text-[var(--color-neutral-800)] font-medium truncate;
+}
+
+.location-dropdown__input-text--placeholder {
+  @apply text-[var(--color-neutral-400)] font-normal;
+}
+
+.location-dropdown__input-chevron {
+  @apply text-[var(--color-neutral-800)] flex-shrink-0 transition-transform duration-200;
+}
+
+/* Input States */
+.location-dropdown__input--default {
+  @apply border-[var(--color-tuna-500)];
+}
+
+.location-dropdown__input--open {
+  @apply border-[var(--color-neutral-800)] shadow-sm;
+}
+
+.location-dropdown__input--open .location-dropdown__input-chevron {
+  @apply !transform !rotate-180;
+}
+
+.location-dropdown__input--selected {
+  @apply border-[var(--color-tuna-500)];
+}
+
+.location-dropdown__input--error {
+  @apply border-[var(--color-coral-red-600)] bg-[var(--color-coral-red-50)];
+}
+
+.location-dropdown__input--error .location-dropdown__input-text {
+  @apply text-[var(--color-coral-red-600)];
+}
+
+.location-dropdown__input--error .location-dropdown__input-icon,
+.location-dropdown__input--error .location-dropdown__input-chevron {
+  @apply text-[var(--color-coral-red-600)];
+}
+
+.location-dropdown__input--disabled {
+  @apply bg-[var(--color-surface-50)] border-[var(--color-neutral-400)] cursor-not-allowed opacity-60;
+}
+
+.location-dropdown__input--disabled .location-dropdown__input-text,
+.location-dropdown__input--disabled .location-dropdown__input-icon,
+.location-dropdown__input--disabled .location-dropdown__input-chevron {
+  @apply text-[var(--color-neutral-400)];
+}
+
+/* Dropdown Panel */
+.location-dropdown__panel {
+  @apply absolute top-full left-0 right-0 mt-2 bg-white rounded-xl overflow-hidden z-50 w-[17.5rem] border border-[var(--color-neutral-200)];
+}
+
+.location-dropdown__content {
+  @apply overflow-y-auto overflow-x-hidden;
+  scrollbar-width: thin;
+  scrollbar-color: #9ca3af #f3f4f6;
+}
+
+.location-dropdown__content::-webkit-scrollbar {
+  @apply w-1.5;
+}
+
+.location-dropdown__content::-webkit-scrollbar-track {
+  @apply bg-[#f3f4f6] rounded;
+}
+
+.location-dropdown__content::-webkit-scrollbar-thumb {
+  @apply bg-[#9ca3af] rounded;
+}
+
+.location-dropdown__options-wrapper {
+  @apply flex flex-col gap-3 p-4;
+}
+
+/* Group */
+.location-dropdown__group {
+  @apply flex flex-col;
+}
+
+.location-dropdown__group-header {
+  @apply px-2 py-2 text-xs font-bold text-[var(--color-neutral-800)] uppercase tracking-wide;
+}
+
+.location-dropdown__divider {
+  @apply w-full h-px bg-[var(--color-neutral-200)] my-2;
+}
+
+.location-dropdown__group-options {
+  @apply flex flex-col gap-3;
+}
+
+/* Option Item */
+.location-dropdown__option {
+  @apply flex items-center gap-2 px-2 py-2 cursor-pointer transition-all duration-150 rounded-lg;
+}
+
+.location-dropdown__option:hover {
+  @apply bg-[var(--color-surface-50)];
+}
+
+.location-dropdown__option--selected {
+  @apply bg-[#f0fdfb] border-[0.5px] border-solid border-[#15b7b6];
+}
+
+.location-dropdown__option--selected:hover {
+  @apply bg-[#e6fcf9];
+}
+
+.location-dropdown__option--disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.location-dropdown__option--disabled:hover {
+  @apply bg-transparent;
+}
+
+.location-dropdown__option-icon {
+  @apply text-[var(--color-neutral-800)] flex-shrink-0;
+}
+
+.location-dropdown__option--selected .location-dropdown__option-icon {
+  @apply text-[var(--color-atoll-green-800)];
+}
+
+.location-dropdown__option-text {
+  @apply text-sm leading-5 text-[var(--color-neutral-800)] font-medium flex-1 min-w-0;
+}
+
+.location-dropdown__option--selected .location-dropdown__option-text {
+  @apply text-[var(--color-atoll-green-800)] font-semibold;
+}
+
+/* Type-specific adjustments */
+.location-dropdown--airport-port .location-dropdown__content {
+  @apply max-h-[auto];
+}
+
+.location-dropdown--accommodation .location-dropdown__content {
+  @apply max-h-[240px];
+}
+
+.location-dropdown--pickup-dropoff .location-dropdown__content {
+  @apply max-h-[240px];
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .location-dropdown__input {
+    @apply px-2.5 py-2;
+  }
+
+  .location-dropdown__input-text {
+    @apply text-xs;
+  }
+
+  .location-dropdown__option {
+    @apply px-2 py-1.5;
+  }
+
+  .location-dropdown__option-text {
+    @apply text-xs;
+  }
+}

package/src/styles/components/molecule/timePicker.css

@@ -1,79 +1,79 @@
-.time-picker-wrapper {
-  @apply flex flex-col gap-2 w-fit;
-}
-
-.time-picker__label {
-  @apply m-0 font-sans text-sm font-medium leading-5 text-[var(--input-color-label-default)];
-}
-
-.time-picker {
-  @apply flex items-center gap-3 p-0 h-11;
-}
-
-.time-picker__input {
-  @apply w-[2.8125rem] h-[2.8125rem] px-3 rounded-xl bg-white border border-[var(--color-tuna-500)]
-}
-
-.time-picker__input:focus-visible,
-.time-picker__input:active {
-  @apply shadow-none outline-none;
-}
-
-.time-picker__colon {
-  @apply font-sans text-sm leading-5
-    text-[var(--input-color-foreground-default)];
-}
-
-.time-picker__am-pm {
-  @apply flex items-center overflow-hidden rounded-md h-11 shrink-0;
-}
-
-.time-picker__seg {
-  @apply border border-[var(--segmented-button-color-border-default)]
-    bg-[var(--segmented-button-color-background-default)]
-    py-2 px-3 min-w-[3.82rem]
-    h-full flex items-center justify-center
-    cursor-pointer
-    text-[var(--color-tuna-700)] font-bold text-sm;
-}
-
-.time-picker__seg--left {
-  @apply border-r-0 rounded-l-md;
-}
-
-.time-picker__seg--right {
-  @apply border-l-0 rounded-r-md;
-}
-
-.time-picker__seg--selected {
-  @apply bg-[var(--segmented-button-color-background-selected)]
-    border-[var(--segmented-button-color-border-selected)]
-    text-[var(--segmented-button-color-foreground-selected)];
-}
-
-.time-picker--default .time-picker__unit {
-  @apply bg-[var(--input-color-background-default)]
-    border-[var(--input-color-border-default)];
-}
-
-.time-picker--active .time-picker__unit,
-.time-picker--typing .time-picker__unit {
-  @apply border-2 border-[var(--input-color-border-active)];
-}
-
-.time-picker--success .time-picker__unit {
-  @apply bg-[var(--color-success-50)]
-    border-[var(--color-success-500)];
-}
-
-.time-picker--error .time-picker__unit {
-  @apply bg-[var(--color-error-50)]
-    border-[var(--color-error-500)];
-}
-
-.time-picker--disabled .time-picker__unit,
-.time-picker--disabled .time-picker__seg {
-  @apply bg-[var(--input-color-background-disabled)]
-    border-[var(--input-color-border-disabled)]
-    cursor-not-allowed opacity-60;
+.time-picker-wrapper {
+  @apply flex flex-col gap-2 w-fit;
+}
+
+.time-picker__label {
+  @apply m-0 font-sans text-sm font-medium leading-5 text-[var(--input-color-label-default)];
+}
+
+.time-picker {
+  @apply flex items-center gap-3 p-0 h-11;
+}
+
+.time-picker__input {
+  @apply w-[2.8125rem] h-[2.8125rem] px-3 rounded-xl bg-white border border-[var(--color-tuna-500)]
+}
+
+.time-picker__input:focus-visible,
+.time-picker__input:active {
+  @apply shadow-none outline-none;
+}
+
+.time-picker__colon {
+  @apply font-sans text-sm leading-5
+    text-[var(--input-color-foreground-default)];
+}
+
+.time-picker__am-pm {
+  @apply flex items-center overflow-hidden rounded-md h-11 shrink-0;
+}
+
+.time-picker__seg {
+  @apply border border-[var(--segmented-button-color-border-default)]
+    bg-[var(--segmented-button-color-background-default)]
+    py-2 px-3 min-w-[3.82rem]
+    h-full flex items-center justify-center
+    cursor-pointer
+    text-[var(--color-tuna-700)] font-bold text-sm;
+}
+
+.time-picker__seg--left {
+  @apply border-r-0 rounded-l-md;
+}
+
+.time-picker__seg--right {
+  @apply border-l-0 rounded-r-md;
+}
+
+.time-picker__seg--selected {
+  @apply bg-[var(--segmented-button-color-background-selected)]
+    border-[var(--segmented-button-color-border-selected)]
+    text-[var(--segmented-button-color-foreground-selected)];
+}
+
+.time-picker--default .time-picker__unit {
+  @apply bg-[var(--input-color-background-default)]
+    border-[var(--input-color-border-default)];
+}
+
+.time-picker--active .time-picker__unit,
+.time-picker--typing .time-picker__unit {
+  @apply border-2 border-[var(--input-color-border-active)];
+}
+
+.time-picker--success .time-picker__unit {
+  @apply bg-[var(--color-success-50)]
+    border-[var(--color-success-500)];
+}
+
+.time-picker--error .time-picker__unit {
+  @apply bg-[var(--color-error-50)]
+    border-[var(--color-error-500)];
+}
+
+.time-picker--disabled .time-picker__unit,
+.time-picker--disabled .time-picker__seg {
+  @apply bg-[var(--input-color-background-disabled)]
+    border-[var(--input-color-border-disabled)]
+    cursor-not-allowed opacity-60;
 }