mautourco-components 0.2.4 → 0.2.7

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

@@ -1,83 +1,83 @@
-.rating-tab {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  box-sizing: border-box;
-  padding: var(--rating-tab-spacing-padding-y, 12px)
-    var(--rating-tab-spacing-padding-x, 16px);
-  border-radius: var(--rating-tab-border-radius-default, 12px);
-  border-width: var(--rating-tab-border-border, 1px);
-  border-style: solid;
-  background-color: var(--rating-tab-color-background-default, #ffffff);
-  border-color: var(--rating-tab-color-border-default, #a3a3a3);
-  cursor: pointer;
-  transition: background-color 0.2s ease, border-color 0.2s ease,
-    box-shadow 0.2s ease;
-}
-
-.rating-tab__left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.rating-tab__checkbox {
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
-  border: 1px solid var(--rating-tab-color-border-default, #a3a3a3);
-  background-color: #ffffff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.rating-tab__checkbox-icon {
-  color: var(--checkbox-color-checkbox-checked-default, #0f7173);
-}
-
-.rating-tab__label {
-  color: var(--color-text-default, #262626);
-}
-
-/* States */
-
-.rating-tab--default:hover {
-  background-color: var(--rating-tab-color-background-hover, #d9d9d9);
-  border-color: var(--rating-tab-color-border-hover, #a3a3a3);
-}
-
-.rating-tab--active {
-  background-color: var(
-    --rating-tab-color-background-active,
-    #d9d9d9
-  );
-  border-color: var(--rating-tab-color-border-active, #a3a3a3);
-}
-
-.rating-tab:focus-visible {
-  outline: 2px solid var(--rating-tab-color-border-focused, #a3a3a3);
-  outline-offset: 2px;
-  background-color: var(
-    --rating-tab-color-background-focused,
-    #d9d9d9
-  );
-}
-
-.rating-tab--disabled {
-  background-color: var(
-    --rating-tab-color-background-disabled,
-    #fbfbfb
-  );
-  border-color: var(--rating-tab-color-border-disabled, #d1d5db);
-  cursor: not-allowed;
-  opacity: 0.7;
-}
-
-.rating-tab--disabled .rating-tab__checkbox-icon {
-  opacity: 0.6;
-}
-
-
+.rating-tab {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--rating-tab-spacing-padding-y, 12px)
+    var(--rating-tab-spacing-padding-x, 16px);
+  border-radius: var(--rating-tab-border-radius-default, 12px);
+  border-width: var(--rating-tab-border-border, 1px);
+  border-style: solid;
+  background-color: var(--rating-tab-color-background-default, #ffffff);
+  border-color: var(--rating-tab-color-border-default, #a3a3a3);
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.rating-tab__left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.rating-tab__checkbox {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border: 1px solid var(--rating-tab-color-border-default, #a3a3a3);
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.rating-tab__checkbox-icon {
+  color: var(--checkbox-color-checkbox-checked-default, #0f7173);
+}
+
+.rating-tab__label {
+  color: var(--color-text-default, #262626);
+}
+
+/* States */
+
+.rating-tab--default:hover {
+  background-color: var(--rating-tab-color-background-hover, #d9d9d9);
+  border-color: var(--rating-tab-color-border-hover, #a3a3a3);
+}
+
+.rating-tab--active {
+  background-color: var(
+    --rating-tab-color-background-active,
+    #d9d9d9
+  );
+  border-color: var(--rating-tab-color-border-active, #a3a3a3);
+}
+
+.rating-tab:focus-visible {
+  outline: 2px solid var(--rating-tab-color-border-focused, #a3a3a3);
+  outline-offset: 2px;
+  background-color: var(
+    --rating-tab-color-background-focused,
+    #d9d9d9
+  );
+}
+
+.rating-tab--disabled {
+  background-color: var(
+    --rating-tab-color-background-disabled,
+    #fbfbfb
+  );
+  border-color: var(--rating-tab-color-border-disabled, #d1d5db);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.rating-tab--disabled .rating-tab__checkbox-icon {
+  opacity: 0.6;
+}
+
+

package/src/styles/components/scrollbar.css

@@ -1,63 +1,63 @@
-/* Scrollbar Styles */
-/* Webkit browsers (Chrome, Safari, Edge) */
-::-webkit-scrollbar {
-  width: var(--scrollbar-size-width);
-  height: var(--scrollbar-size-width);
-}
-
-::-webkit-scrollbar-track {
-  background: var(--scrollbar-color-track);
-  border-radius: var(--scrollbar-border-radius);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-color-thumb);
-  border-radius: var(--scrollbar-border-radius);
-  margin: var(--scrollbar-spacing-margin);
-  min-height: 20px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-color-thumb-hover);
-}
-
-::-webkit-scrollbar-corner {
-  background: var(--scrollbar-color-track);
-}
-
-/* Firefox */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
-}
-
-/* Custom scrollbar for specific elements */
-.custom-scrollbar {
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
-}
-
-.custom-scrollbar::-webkit-scrollbar {
-  width: var(--scrollbar-size-width);
-  height: var(--scrollbar-size-width);
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: var(--scrollbar-color-track);
-  border-radius: var(--scrollbar-border-radius);
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-color-thumb);
-  border-radius: var(--scrollbar-border-radius);
-  margin: var(--scrollbar-spacing-margin);
-  min-height: 20px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-color-thumb-hover);
-}
-
-.custom-scrollbar::-webkit-scrollbar-corner {
-  background: var(--scrollbar-color-track);
-}
+/* Scrollbar Styles */
+/* Webkit browsers (Chrome, Safari, Edge) */
+::-webkit-scrollbar {
+  width: var(--scrollbar-size-width);
+  height: var(--scrollbar-size-width);
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-color-track);
+  border-radius: var(--scrollbar-border-radius);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-color-thumb);
+  border-radius: var(--scrollbar-border-radius);
+  margin: var(--scrollbar-spacing-margin);
+  min-height: 20px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-color-thumb-hover);
+}
+
+::-webkit-scrollbar-corner {
+  background: var(--scrollbar-color-track);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
+}
+
+/* Custom scrollbar for specific elements */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: var(--scrollbar-size-width);
+  height: var(--scrollbar-size-width);
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: var(--scrollbar-color-track);
+  border-radius: var(--scrollbar-border-radius);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-color-thumb);
+  border-radius: var(--scrollbar-border-radius);
+  margin: var(--scrollbar-spacing-margin);
+  min-height: 20px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-color-thumb-hover);
+}
+
+.custom-scrollbar::-webkit-scrollbar-corner {
+  background: var(--scrollbar-color-track);
+}

package/src/styles/components/segmented-button.css

@@ -1,134 +1,134 @@
-.segmented-button {
-  display: inline-flex;
-  position: relative;
-  background: transparent;
-}
-
-.segmented-button--horizontal {
-  flex-direction: row;
-  align-items: stretch;
-  gap: var(--segmented-button-spacing-container-gap, 0rem);
-  padding: var(--segmented-button-spacing-container-padding-y, 0rem)
-    var(--segmented-button-spacing-container-padding-x, 0rem);
-}
-
-.segmented-button--vertical {
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--segmented-button-spacing-container-gap, 0rem);
-  padding: var(--segmented-button-spacing-container-padding-y, 0rem)
-    var(--segmented-button-spacing-container-padding-x, 0rem);
-}
-
-.segmented-button__item {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--segmented-button-spacing-content-gap, 4rem);
-  padding: var(--segmented-button-spacing-content-padding-y, 8rem)
-    var(--segmented-button-spacing-content-padding-x, 12rem);
-  background-color: var(--segmented-button-color-background-default, #fafafa);
-  color: var(--segmented-button-color-foreground-default, #303642);
-  border: var(--segmented-button-border-width-default, 0.5rem) solid
-    var(--segmented-button-color-border-default, #a3a3a3);
-  cursor: pointer;
-  user-select: none;
-  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: var(--font-size-text-sm, 14rem);
-  line-height: calc(var(--font-leading-leading-sm, 20)* 1rem);
-  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out,
-    border-color 0.2s ease-in-out;
-  min-width: 0;
-  white-space: nowrap;
-}
-
-/* Horizontal layout - remove border radius from middle items */
-.segmented-button--horizontal .segmented-button__item {
-  margin-right: calc(var(--segmented-button-border-width-default, 0.5rem)* -1);
-  border-radius: 0;
-}
-
-.segmented-button--horizontal .segmented-button__item--first {
-  border-top-left-radius: var(--segmented-button-border-radius-border, 6rem);
-  border-bottom-left-radius: var(--segmented-button-border-radius-border, 6rem);
-}
-
-.segmented-button--horizontal .segmented-button__item--last {
-  margin-right: 0;
-  border-top-right-radius: var(--segmented-button-border-radius-border, 6rem);
-  border-bottom-right-radius: var(--segmented-button-border-radius-border, 6rem);
-}
-
-/* Vertical layout - remove border radius from middle items */
-.segmented-button--vertical .segmented-button__item {
-  margin-bottom: calc(var(--segmented-button-border-width-default, 0.5rem)* -1);
-  border-radius: 0;
-}
-
-.segmented-button--vertical .segmented-button__item--first {
-  border-top-left-radius: var(--segmented-button-border-radius-border, 6rem);
-  border-top-right-radius: var(--segmented-button-border-radius-border, 6rem);
-}
-
-.segmented-button--vertical .segmented-button__item--last {
-  margin-bottom: 0;
-  border-bottom-left-radius: var(--segmented-button-border-radius-border, 6rem);
-  border-bottom-right-radius: var(--segmented-button-border-radius-border, 6rem);
-}
-
-/* Hover state */
-.segmented-button__item:hover:not(.segmented-button__item--selected):not(:disabled) {
-  background-color: var(--segmented-button-color-background-hover, #e5e5e5);
-  color: var(--segmented-button-color-foreground-hover, #303642);
-  border-color: var(--segmented-button-color-border-hover, #a3a3a3);
-}
-
-/* Focus state */
-.segmented-button__item:focus-visible:not(:disabled) {
-  outline: none;
-  background-color: var(--segmented-button-color-background-focus, #fafafa);
-  color: var(--segmented-button-color-foreground-focus, #303642);
-  border-color: var(--segmented-button-color-border-focus, #a3a3a3);
-  box-shadow: 0 0 0 2rem var(--segmented-button-color-border-focus, #a3a3a3);
-}
-
-/* Selected state */
-.segmented-button__item--selected {
-  background-color: var(--segmented-button-color-background-selected, #fe8839);
-  color: var(--segmented-button-color-foreground-selected, #ffffff);
-  border-color: var(--segmented-button-color-border-selected, #fe8839);
-  z-index: 1;
-}
-
-.segmented-button__item--selected:hover:not(:disabled) {
-  background-color: var(--segmented-button-color-background-selected, #fe8839);
-  color: var(--segmented-button-color-foreground-selected, #ffffff);
-  border-color: var(--segmented-button-color-border-selected, #fe8839);
-}
-
-/* Disabled state */
-.segmented-button__item:disabled,
-.segmented-button__item--disabled {
-  cursor: not-allowed;
-  background-color: var(--segmented-button-color-background-disabled, rgba(255, 255, 255, 0));
-  color: var(--segmented-button-color-foreground-disabled, #a3a3a3);
-  border-color: var(--segmented-button-color-border-disabled, #e5e5e5);
-  opacity: 0.6;
-}
-
-.segmented-button--disabled .segmented-button__item {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-/* Label */
-.segmented-button__label {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
+.segmented-button {
+  display: inline-flex;
+  position: relative;
+  background: transparent;
+}
+
+.segmented-button--horizontal {
+  flex-direction: row;
+  align-items: stretch;
+  gap: var(--segmented-button-spacing-container-gap, 0rem);
+  padding: var(--segmented-button-spacing-container-padding-y, 0rem)
+    var(--segmented-button-spacing-container-padding-x, 0rem);
+}
+
+.segmented-button--vertical {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--segmented-button-spacing-container-gap, 0rem);
+  padding: var(--segmented-button-spacing-container-padding-y, 0rem)
+    var(--segmented-button-spacing-container-padding-x, 0rem);
+}
+
+.segmented-button__item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--segmented-button-spacing-content-gap, 4rem);
+  padding: var(--segmented-button-spacing-content-padding-y, 8rem)
+    var(--segmented-button-spacing-content-padding-x, 12rem);
+  background-color: var(--segmented-button-color-background-default, #fafafa);
+  color: var(--segmented-button-color-foreground-default, #303642);
+  border: var(--segmented-button-border-width-default, 0.5rem) solid
+    var(--segmented-button-color-border-default, #a3a3a3);
+  cursor: pointer;
+  user-select: none;
+  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: var(--font-size-text-sm, 14rem);
+  line-height: calc(var(--font-leading-leading-sm, 20)* 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+/* Horizontal layout - remove border radius from middle items */
+.segmented-button--horizontal .segmented-button__item {
+  margin-right: calc(var(--segmented-button-border-width-default, 0.5rem)* -1);
+  border-radius: 0;
+}
+
+.segmented-button--horizontal .segmented-button__item--first {
+  border-top-left-radius: var(--segmented-button-border-radius-border, 6rem);
+  border-bottom-left-radius: var(--segmented-button-border-radius-border, 6rem);
+}
+
+.segmented-button--horizontal .segmented-button__item--last {
+  margin-right: 0;
+  border-top-right-radius: var(--segmented-button-border-radius-border, 6rem);
+  border-bottom-right-radius: var(--segmented-button-border-radius-border, 6rem);
+}
+
+/* Vertical layout - remove border radius from middle items */
+.segmented-button--vertical .segmented-button__item {
+  margin-bottom: calc(var(--segmented-button-border-width-default, 0.5rem)* -1);
+  border-radius: 0;
+}
+
+.segmented-button--vertical .segmented-button__item--first {
+  border-top-left-radius: var(--segmented-button-border-radius-border, 6rem);
+  border-top-right-radius: var(--segmented-button-border-radius-border, 6rem);
+}
+
+.segmented-button--vertical .segmented-button__item--last {
+  margin-bottom: 0;
+  border-bottom-left-radius: var(--segmented-button-border-radius-border, 6rem);
+  border-bottom-right-radius: var(--segmented-button-border-radius-border, 6rem);
+}
+
+/* Hover state */
+.segmented-button__item:hover:not(.segmented-button__item--selected):not(:disabled) {
+  background-color: var(--segmented-button-color-background-hover, #e5e5e5);
+  color: var(--segmented-button-color-foreground-hover, #303642);
+  border-color: var(--segmented-button-color-border-hover, #a3a3a3);
+}
+
+/* Focus state */
+.segmented-button__item:focus-visible:not(:disabled) {
+  outline: none;
+  background-color: var(--segmented-button-color-background-focus, #fafafa);
+  color: var(--segmented-button-color-foreground-focus, #303642);
+  border-color: var(--segmented-button-color-border-focus, #a3a3a3);
+  box-shadow: 0 0 0 2rem var(--segmented-button-color-border-focus, #a3a3a3);
+}
+
+/* Selected state */
+.segmented-button__item--selected {
+  background-color: var(--segmented-button-color-background-selected, #fe8839);
+  color: var(--segmented-button-color-foreground-selected, #ffffff);
+  border-color: var(--segmented-button-color-border-selected, #fe8839);
+  z-index: 1;
+}
+
+.segmented-button__item--selected:hover:not(:disabled) {
+  background-color: var(--segmented-button-color-background-selected, #fe8839);
+  color: var(--segmented-button-color-foreground-selected, #ffffff);
+  border-color: var(--segmented-button-color-border-selected, #fe8839);
+}
+
+/* Disabled state */
+.segmented-button__item:disabled,
+.segmented-button__item--disabled {
+  cursor: not-allowed;
+  background-color: var(--segmented-button-color-background-disabled, rgba(255, 255, 255, 0));
+  color: var(--segmented-button-color-foreground-disabled, #a3a3a3);
+  border-color: var(--segmented-button-color-border-disabled, #e5e5e5);
+  opacity: 0.6;
+}
+
+.segmented-button--disabled .segmented-button__item {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Label */
+.segmented-button__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}