mautourco-components 0.2.5 → 0.2.8

package/src/styles/components/multiselect-dropdown.css

@@ -1,230 +1,230 @@
-/* MultiSelectDropdown Component Styles */
-.multiselect-dropdown {
-  position: relative;
-  display: block;
-  width: 100%;
-}
-
-.multiselect-dropdown__input-container {
-  position: relative;
-  width: 100%;
-}
-
-.multiselect-dropdown__input {
-  width: 100%;
-}
-
-/* Hide placeholder text when chips are displayed */
-.multiselect-dropdown__input-container:has(.multiselect-dropdown__chips) .dropdown-input__text {
-  opacity: 0;
-}
-
-.multiselect-dropdown__chips {
-  position: absolute;
-  top: 50%;
-  left: var(--multiselect-spacing-chips-left, 0.5rem);
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  gap: var(--multiselect-spacing-chips-gap, 0.25rem);
-  max-width: calc(100% - var(--multiselect-size-icon-chevron-width, 2.5rem));
-  overflow: hidden;
-  pointer-events: none;
-  z-index: 10;
-  padding: var(--multiselect-spacing-chips-padding, 0.625rem 0);
-}
-
-.multiselect-dropdown__chip {
-  flex-shrink: 0;
-  pointer-events: auto;
-}
-
-.multiselect-dropdown__hidden-count {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--multiselect-spacing-hidden-count-min-width, 1.5rem);
-  height: var(--multiselect-size-hidden-count-height, 1.5rem);
-  padding: var(--multiselect-spacing-hidden-count-padding, 0 0.375rem);
-  background-color: var(--color-slate-50);
-  border-radius: var(--multiselect-border-radius, 0.75rem);
-  font-family: var(--typography-font-family-sans, 'Inter', sans-serif);
-  font-size: var(--multiselect-size-typography-hidden-count-font-size, 0.75rem);
-  font-weight: var(--font-weight-font-medium);
-  color: var(--color-slate-600);
-  pointer-events: auto;
-}
-
-.multiselect-dropdown__panel {
-  position: absolute;
-  top: calc(100% + var(--multiselect-spacing-menu-gap, 0.75rem));
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  width: 100%;
-  background-color: var(--badge-color-foreground);
-  border: var(--multiselect-border-width, 0.0625rem) solid var(--color-slate-500);
-  border-top: 0.0625rem solid var(--color-slate-500);
-  border-radius: var(--multiselect-border-radius, 0.75rem);
-  overflow: hidden;
-  opacity: 1;
-  transform: translateY(0);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: dropdownFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.multiselect-dropdown__menu {
-  position: relative;
-  opacity: 1;
-  transform: translateY(0);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  flex-direction: column;
-}
-
-.multiselect-dropdown__search {
-  padding: var(--spacing-padding-py-px) var(--multiselect-spacing-options-padding-x, 0.8125rem);
-  padding-bottom: var(--spacing-padding-px-0, var(--spacing-padding-py-px));
-  padding-right: 1.5625rem;
-}
-
-.multiselect-dropdown__search-input {
-  width: 100%;
-  height: 32px;
-  padding: 0 var(--spacing-sm, 0.75rem);
-  border-radius: var(--multiselect-border-radius, 0.75rem);
-  border: var(--multiselect-border-width, 0.0625rem) solid var(--color-slate-500);
-  outline: none;
-}
-
-.multiselect-dropdown__options {
-  max-height: var(--multiselect-size-menu-max-height, 17.25rem);
-  overflow-y: auto;
-  padding: var(--spacing-padding-py-px) var(--multiselect-spacing-options-padding-x, 0.8125rem);
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--multiselect-spacing-options-gap-y, 0.5rem);
-}
-
-.multiselect-dropdown__group {
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--multiselect-spacing-group-gap-y, 0.5rem);
-}
-
-.multiselect-dropdown__group + .multiselect-dropdown__group {
-  border-top: var(--multiselect-border-width, 0.0625rem) solid var(--color-surface-300);
-  padding-top: var(--multiselect-spacing-group-gap-y, 0.5rem);
-}
-
-.multiselect-dropdown__group-header {
-  padding: var(--multiselect-spacing-group-header-padding-y, 0.25rem) var(--multiselect-spacing-group-header-padding-x, 0);
-  display: flex;
-  align-items: center;
-  column-gap: var(--multiselect-spacing-group-header-gap, 0.625rem);
-}
-.multiselect-dropdown__group-icon {
-  width: var(--multiselect-size-group-icon, 1rem);
-  height: var(--multiselect-size-group-icon, 1rem);
-  border-radius: 9999px;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.multiselect-dropdown__group-icon img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.multiselect-dropdown__group-options {
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--multiselect-spacing-option-gap, 0.5rem);
-}
-
-.multiselect-dropdown__option {
-  cursor: pointer;
-  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: var(--multiselect-border-radius, 0.75rem);
-  border: 0.5px solid var(--color-transparent);
-  /* Reserve the same space in both states to avoid layout shift */
-  min-width: var(--multiselect-size-optionitem-min-width, 7.3125rem);
-  min-height: var(--multiselect-size-optionitem-min-height, 2.5rem);
-  padding: var(--multiselect-spacing-optionitem-padding-y, 0.5rem) var(--multiselect-spacing-optionitem-padding-x, 1rem);
-  display: flex;
-  align-items: center;
-  gap: var(--multiselect-spacing-optionitem-gap, 0.5rem);
-}
-
-.multiselect-dropdown__option:hover {
-  background-color: var(--color-slate-50);
-  border-radius: var(--multiselect-border-selected-radius, var(--multiselect-border-radius, 0.75rem));
-}
-
-.multiselect-dropdown__option:active {
-  background-color: var(--color-slate-50);
-  border-radius: var(--multiselect-border-selected-radius, var(--multiselect-border-radius, 0.75rem));
-}
-
-/* Selected state applied to the option container when its Checkbox is checked */
-.multiselect-dropdown__option:has(.checkbox--checked) {
-  opacity: 1;
-  border-radius: var(--multiselect-border-selected-radius, var(--multiselect-border-radius, 0.75rem));
-  border-color: var(--color-atoll-green-600);
-  border-top: 0.5px solid var(--color-atoll-green-600);
-  background-color: var(--color-atoll-green-100);
-}
-
-/* Ensure wrapper controls spacing */
-.multiselect-dropdown__option .checkbox-label { padding: 0; width: 100%; }
-
-.multiselect-dropdown__option-icon {
-  width: var(--multiselect-size-option-icon, 1rem);
-  height: var(--multiselect-size-option-icon, 1rem);
-  border-radius: 9999px;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.multiselect-dropdown__option-icon img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.multiselect-dropdown__footer {
-  padding: var(--multiselect-spacing-footer-padding, 0.5rem 1.25rem);
-  font-family: var(--typography-font-family-sans, 'Inter', sans-serif);
-  font-size: var(--multiselect-size-typography-footer-font-size, 0.875rem);
-  line-height: var(--multiselect-size-typography-footer-line-height, 1.25rem);
-  color: var(--color-slate-600);
-  background-color: var(--color-transparent);
-  border-top: 1px solid var(--color-slate-500);
-  margin-top: 0;
-}
-
-.multiselect-dropdown__footer-text {
-  margin: 0;
-}
-
-/* States */
-.multiselect-dropdown--disabled .multiselect-dropdown__chips {
-  opacity: 0.6;
-}
-
-
-/* Responsive adjustments */
-@media (max-width: var(--multiselect-responsive-mobile-breakpoint)) {
-  .multiselect-dropdown__chips {
-    max-width: calc(100% - var(--multiselect-responsive-mobile-icon-width));
-  }
-  
-  .multiselect-dropdown__hidden-count {
-    min-width: var(--multiselect-responsive-mobile-hidden-count-min-width);
-    height: var(--multiselect-responsive-mobile-hidden-count-height);
-    font-size: var(--multiselect-responsive-mobile-hidden-count-font-size);
-  }
-}
+/* MultiSelectDropdown Component Styles */
+.multiselect-dropdown {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.multiselect-dropdown__input-container {
+  position: relative;
+  width: 100%;
+}
+
+.multiselect-dropdown__input {
+  width: 100%;
+}
+
+/* Hide placeholder text when chips are displayed */
+.multiselect-dropdown__input-container:has(.multiselect-dropdown__chips) .dropdown-input__text {
+  opacity: 0;
+}
+
+.multiselect-dropdown__chips {
+  position: absolute;
+  top: 50%;
+  left: var(--multiselect-spacing-chips-left, 0.5rem);
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: var(--multiselect-spacing-chips-gap, 0.25rem);
+  max-width: calc(100% - var(--multiselect-size-icon-chevron-width, 2.5rem));
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 10;
+  padding: var(--multiselect-spacing-chips-padding, 0.625rem 0);
+}
+
+.multiselect-dropdown__chip {
+  flex-shrink: 0;
+  pointer-events: auto;
+}
+
+.multiselect-dropdown__hidden-count {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--multiselect-spacing-hidden-count-min-width, 1.5rem);
+  height: var(--multiselect-size-hidden-count-height, 1.5rem);
+  padding: var(--multiselect-spacing-hidden-count-padding, 0 0.375rem);
+  background-color: var(--color-slate-50);
+  border-radius: var(--multiselect-border-radius, 0.75rem);
+  font-family: var(--typography-font-family-sans, 'Inter', sans-serif);
+  font-size: var(--multiselect-size-typography-hidden-count-font-size, 0.75rem);
+  font-weight: var(--font-weight-font-medium);
+  color: var(--color-slate-600);
+  pointer-events: auto;
+}
+
+.multiselect-dropdown__panel {
+  position: absolute;
+  top: calc(100% + var(--multiselect-spacing-menu-gap, 0.75rem));
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  width: 100%;
+  background-color: var(--badge-color-foreground);
+  border: var(--multiselect-border-width, 0.0625rem) solid var(--color-slate-500);
+  border-top: 0.0625rem solid var(--color-slate-500);
+  border-radius: var(--multiselect-border-radius, 0.75rem);
+  overflow: hidden;
+  opacity: 1;
+  transform: translateY(0);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: dropdownFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.multiselect-dropdown__menu {
+  position: relative;
+  opacity: 1;
+  transform: translateY(0);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+}
+
+.multiselect-dropdown__search {
+  padding: var(--spacing-padding-py-px) var(--multiselect-spacing-options-padding-x, 0.8125rem);
+  padding-bottom: var(--spacing-padding-px-0, var(--spacing-padding-py-px));
+  padding-right: 1.5625rem;
+}
+
+.multiselect-dropdown__search-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 var(--spacing-sm, 0.75rem);
+  border-radius: var(--multiselect-border-radius, 0.75rem);
+  border: var(--multiselect-border-width, 0.0625rem) solid var(--color-slate-500);
+  outline: none;
+}
+
+.multiselect-dropdown__options {
+  max-height: var(--multiselect-size-menu-max-height, 17.25rem);
+  overflow-y: auto;
+  padding: var(--spacing-padding-py-px) var(--multiselect-spacing-options-padding-x, 0.8125rem);
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--multiselect-spacing-options-gap-y, 0.5rem);
+}
+
+.multiselect-dropdown__group {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--multiselect-spacing-group-gap-y, 0.5rem);
+}
+
+.multiselect-dropdown__group + .multiselect-dropdown__group {
+  border-top: var(--multiselect-border-width, 0.0625rem) solid var(--color-surface-300);
+  padding-top: var(--multiselect-spacing-group-gap-y, 0.5rem);
+}
+
+.multiselect-dropdown__group-header {
+  padding: var(--multiselect-spacing-group-header-padding-y, 0.25rem) var(--multiselect-spacing-group-header-padding-x, 0);
+  display: flex;
+  align-items: center;
+  column-gap: var(--multiselect-spacing-group-header-gap, 0.625rem);
+}
+.multiselect-dropdown__group-icon {
+  width: var(--multiselect-size-group-icon, 1rem);
+  height: var(--multiselect-size-group-icon, 1rem);
+  border-radius: 9999px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.multiselect-dropdown__group-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.multiselect-dropdown__group-options {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--multiselect-spacing-option-gap, 0.5rem);
+}
+
+.multiselect-dropdown__option {
+  cursor: pointer;
+  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: var(--multiselect-border-radius, 0.75rem);
+  border: 0.5px solid var(--color-transparent);
+  /* Reserve the same space in both states to avoid layout shift */
+  min-width: var(--multiselect-size-optionitem-min-width, 7.3125rem);
+  min-height: var(--multiselect-size-optionitem-min-height, 2.5rem);
+  padding: var(--multiselect-spacing-optionitem-padding-y, 0.5rem) var(--multiselect-spacing-optionitem-padding-x, 1rem);
+  display: flex;
+  align-items: center;
+  gap: var(--multiselect-spacing-optionitem-gap, 0.5rem);
+}
+
+.multiselect-dropdown__option:hover {
+  background-color: var(--color-slate-50);
+  border-radius: var(--multiselect-border-selected-radius, var(--multiselect-border-radius, 0.75rem));
+}
+
+.multiselect-dropdown__option:active {
+  background-color: var(--color-slate-50);
+  border-radius: var(--multiselect-border-selected-radius, var(--multiselect-border-radius, 0.75rem));
+}
+
+/* Selected state applied to the option container when its Checkbox is checked */
+.multiselect-dropdown__option:has(.checkbox--checked) {
+  opacity: 1;
+  border-radius: var(--multiselect-border-selected-radius, var(--multiselect-border-radius, 0.75rem));
+  border-color: var(--color-atoll-green-600);
+  border-top: 0.5px solid var(--color-atoll-green-600);
+  background-color: var(--color-atoll-green-100);
+}
+
+/* Ensure wrapper controls spacing */
+.multiselect-dropdown__option .checkbox-label { padding: 0; width: 100%; }
+
+.multiselect-dropdown__option-icon {
+  width: var(--multiselect-size-option-icon, 1rem);
+  height: var(--multiselect-size-option-icon, 1rem);
+  border-radius: 9999px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.multiselect-dropdown__option-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.multiselect-dropdown__footer {
+  padding: var(--multiselect-spacing-footer-padding, 0.5rem 1.25rem);
+  font-family: var(--typography-font-family-sans, 'Inter', sans-serif);
+  font-size: var(--multiselect-size-typography-footer-font-size, 0.875rem);
+  line-height: var(--multiselect-size-typography-footer-line-height, 1.25rem);
+  color: var(--color-slate-600);
+  background-color: var(--color-transparent);
+  border-top: 1px solid var(--color-slate-500);
+  margin-top: 0;
+}
+
+.multiselect-dropdown__footer-text {
+  margin: 0;
+}
+
+/* States */
+.multiselect-dropdown--disabled .multiselect-dropdown__chips {
+  opacity: 0.6;
+}
+
+
+/* Responsive adjustments */
+@media (max-width: var(--multiselect-responsive-mobile-breakpoint)) {
+  .multiselect-dropdown__chips {
+    max-width: calc(100% - var(--multiselect-responsive-mobile-icon-width));
+  }
+  
+  .multiselect-dropdown__hidden-count {
+    min-width: var(--multiselect-responsive-mobile-hidden-count-min-width);
+    height: var(--multiselect-responsive-mobile-hidden-count-height);
+    font-size: var(--multiselect-responsive-mobile-hidden-count-font-size);
+  }
+}

package/src/styles/components/organism/card-container.css

@@ -1,49 +1,49 @@
-/* Card Container Base Styles - Based on Figma design specs */
-.card-container {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--card-color-background-default, #fafafa);
-  border: 1px solid var(--card-color-border-default, #a3a3a3);
-  border-radius: 24px; /* Figma: card/border-radius/default = 24px (rounded-3xl) */
-}
-
-/* Spacing Variants - Based on Figma design tokens */
-/* Note: Using pixel values directly as Figma specifies. 
-   Tokens are currently generated in rem, but should match these values:
-   - compact: 8px (px-2)
-   - normal: 12px (px-3)
-   - relaxed: 16px (px-4)
-   - chill: 24px (px-6)
-*/
-.card-container--spacing-compact {
-  padding: var(--card-spacing-compact-padding-y, 8px) var(--card-spacing-compact-padding-x, 8px);
-}
-
-.card-container--spacing-normal {
-  padding: var(--card-spacing-normal-padding-y, 12px) var(--card-spacing-normal-padding-x, 12px);
-}
-
-.card-container--spacing-relaxed {
-  padding: var(--card-spacing-relaxed-padding-y, 16px) var(--card-spacing-relaxed-padding-x, 16px);
-}
-
-.card-container--spacing-chill {
-  padding: var(--card-spacing-chill-padding-y, 24px) var(--card-spacing-chill-padding-x, 24px);
-}
-
-/* Interactive States */
-.card-container[onclick] {
-  cursor: pointer;
-  transition: border-color 0.2s ease, background-color 0.2s ease;
-}
-
-.card-container[onclick]:hover {
-  border-color: var(--color-border-medium, #a3a3a3);
-  background-color: var(--color-elevation-state-hover-subtle, #ededed);
-}
-
-.card-container[onclick]:active {
-  border-color: var(--color-border-medium, #a3a3a3);
-  background-color: var(--color-elevation-state-pressed-subtle, #d9d9d9);
-}
-
+/* Card Container Base Styles - Based on Figma design specs */
+.card-container {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--card-color-background-default, #fafafa);
+  border: 1px solid var(--card-color-border-default, #a3a3a3);
+  border-radius: 24px; /* Figma: card/border-radius/default = 24px (rounded-3xl) */
+}
+
+/* Spacing Variants - Based on Figma design tokens */
+/* Note: Using pixel values directly as Figma specifies. 
+   Tokens are currently generated in rem, but should match these values:
+   - compact: 8px (px-2)
+   - normal: 12px (px-3)
+   - relaxed: 16px (px-4)
+   - chill: 24px (px-6)
+*/
+.card-container--spacing-compact {
+  padding: var(--card-spacing-compact-padding-y, 8px) var(--card-spacing-compact-padding-x, 8px);
+}
+
+.card-container--spacing-normal {
+  padding: var(--card-spacing-normal-padding-y, 12px) var(--card-spacing-normal-padding-x, 12px);
+}
+
+.card-container--spacing-relaxed {
+  padding: var(--card-spacing-relaxed-padding-y, 16px) var(--card-spacing-relaxed-padding-x, 16px);
+}
+
+.card-container--spacing-chill {
+  padding: var(--card-spacing-chill-padding-y, 24px) var(--card-spacing-chill-padding-x, 24px);
+}
+
+/* Interactive States */
+.card-container[onclick] {
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.card-container[onclick]:hover {
+  border-color: var(--color-border-medium, #a3a3a3);
+  background-color: var(--color-elevation-state-hover-subtle, #ededed);
+}
+
+.card-container[onclick]:active {
+  border-color: var(--color-border-medium, #a3a3a3);
+  background-color: var(--color-elevation-state-pressed-subtle, #d9d9d9);
+}
+