@locus-ui/components 0.0.15 → 0.1.0

package/dist/index.css

@@ -16,6 +16,13 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  &[data-variant=solid] {
+    background-color: rgba(var(--background-color-2), 0.95);
+  }
+  &[data-variant=outlined],
+  &[data-variant=muted] {
+    background-color: rgba(var(--background-color-2), 0.6);
+  }
   & + .accordion-item[data-variant=solid],
   & + .accordion-item[data-variant=muted] {
     border-top: 1px solid rgba(var(--border-color), 0.2);
@@ -42,6 +49,7 @@
   &[data-variant=solid] {
     background-color: rgba(var(--background-color-2), 0.95);
   }
+  &[data-variant=outlined],
   &[data-variant=muted] {
     background-color: rgba(var(--background-color-2), 0.6);
   }
@@ -96,7 +104,6 @@
   align-items: center;
   height: -moz-fit-content;
   height: fit-content;
-  cursor: pointer;
   border-radius: var(--lcs-radius, 1);
   padding: calc(1px * var(--lcs-spacing, 1)) calc(6px * var(--lcs-spacing, 1));
   gap: calc(5px * var(--lcs-spacing, 1));
@@ -412,19 +419,104 @@
     }
   }
 }
+.flex {
+  display: flex;
+  &[data-gap="0"] {
+    gap: 0;
+  }
+  &[data-gap="1"] {
+    gap: calc(4px * var(--lcs-spacing, 1));
+  }
+  &[data-gap="2"] {
+    gap: calc(8px * var(--lcs-spacing, 1));
+  }
+  &[data-gap="3"] {
+    gap: calc(12px * var(--lcs-spacing, 1));
+  }
+  &[data-gap="4"] {
+    gap: calc(16px * var(--lcs-spacing, 1));
+  }
+  &[data-gap="5"] {
+    gap: calc(20px * var(--lcs-spacing, 1));
+  }
+  &[data-gap="6"] {
+    gap: calc(24px * var(--lcs-spacing, 1));
+  }
+  &[data-gap="7"] {
+    gap: calc(28px * var(--lcs-spacing, 1));
+  }
+  &[data-gap="8"] {
+    gap: calc(32px * var(--lcs-spacing, 1));
+  }
+  &[data-direction=row] {
+    flex-direction: row;
+  }
+  &[data-direction=column] {
+    flex-direction: column;
+  }
+  &[data-direction=row-reverse] {
+    flex-direction: row-reverse;
+  }
+  &[data-direction=column-reverse] {
+    flex-direction: column-reverse;
+  }
+  &[data-justify=start] {
+    justify-content: flex-start;
+  }
+  &[data-justify=end] {
+    justify-content: flex-end;
+  }
+  &[data-justify=center] {
+    justify-content: center;
+  }
+  &[data-justify=between] {
+    justify-content: space-between;
+  }
+  &[data-justify=around] {
+    justify-content: space-around;
+  }
+  &[data-justify=evenly] {
+    justify-content: space-evenly;
+  }
+  &[data-align-items=flex-start] {
+    align-items: flex-start;
+  }
+  &[data-align-items=flex-end] {
+    align-items: flex-end;
+  }
+  &[data-align-items=center] {
+    align-items: center;
+  }
+  &[data-align-items=baseline] {
+    align-items: baseline;
+  }
+  &[data-align-items=stretch] {
+    align-items: stretch;
+  }
+  &[data-wrap=wrap] {
+    flex-wrap: wrap;
+  }
+  &[data-wrap=nowrap] {
+    flex-wrap: nowrap;
+  }
+  &[data-wrap=wrap-reverse] {
+    flex-wrap: wrap-reverse;
+  }
+}
 .panel[data-variant] {
   --panel-custom-color: var(--color, var(--panel-color));
+  border-radius: min(32px, var(--lcs-radius, 0px));
   backdrop-filter: blur(var(--panel-blur, 0px));
   &[data-variant=solid] {
     background-color: rgb(var(--panel-custom-color));
     border: 1px solid transparent;
   }
   &[data-variant=outlined] {
-    background-color: rgba(var(--panel-custom-color), 0.5);
+    background-color: rgba(var(--panel-custom-color), 0.8);
     border: 1px solid rgba(var(--color, var(--border-color)));
   }
   &[data-variant=muted] {
-    background-color: rgba(var(--panel-custom-color), 0.4);
+    background-color: rgba(var(--panel-custom-color), 0.5);
     border: 1px solid transparent;
   }
 }
@@ -553,9 +645,13 @@
 .select-root[data-variant] {
   flex: 1;
   display: flex;
-  flex-wrap: wrap;
   gap: calc(8px * var(--lcs-spacing, 1));
-  width: 100%;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  max-height: -moz-fit-content;
+  max-height: fit-content;
   outline: none;
   &[data-state] {
     align-items: center;
@@ -572,6 +668,7 @@
   }
   &:has(.select-label[data-position=top]) {
     flex-direction: column;
+    align-items: flex-start;
   }
   &:has(.select-label[data-position=left]) {
     flex-direction: row;
@@ -579,6 +676,7 @@
   }
   &:has(.select-label[data-position=inside]) {
     flex-direction: row;
+    flex-wrap: nowrap;
     align-items: center;
   }
   &[data-variant=outlined] {
@@ -586,6 +684,7 @@
       outline: 1px solid rgba(var(--primary), 0.6);
     }
     &:has(.select-label[data-position=inside]) {
+      background-color: rgba(var(--panel-color), 0.9);
       border: 1px solid rgb(var(--border-color));
       border-radius: var(--lcs-radius);
       padding: 0 0 0 calc(8px * var(--lcs-spacing, 1));
@@ -593,6 +692,7 @@
     &:not(:has(.select-label[data-position=inside])) {
       .select-trigger {
         border: 1px solid rgb(var(--border-color));
+        background-color: rgba(var(--panel-color), 0.9);
       }
     }
   }
@@ -646,6 +746,9 @@
   border: none;
   cursor: pointer;
   min-height: 32px;
+  max-height: -moz-fit-content;
+  max-height: fit-content;
+  min-width: 160px;
   gap: calc(8px * var(--lcs-spacing));
   padding: calc(4px * var(--lcs-spacing)) calc(8px * var(--lcs-spacing));
   outline: none;
@@ -679,12 +782,6 @@
       transform: rotate(-180deg);
     }
   }
-  .select-root:has(.select-label[data-position=inside]) .select-trigger {
-    border: none;
-    padding: 0;
-    background-color: transparent;
-    min-height: 0px;
-  }
 }
 .select-content {
   background-color: rgba(var(--background-color-1), 0.9);
@@ -772,9 +869,6 @@
   flex-direction: row;
   gap: calc(12px * var(--lcs-spacing, 1));
   cursor: pointer;
-  &:not([data-align]) {
-    align-items: center;
-  }
   &[data-disabled=true],
   &[data-readonly=true] {
     cursor: not-allowed !important;
@@ -794,52 +888,50 @@
     flex-direction: row-reverse;
   }
   .switch-container {
+    display: flex;
     overflow: hidden;
-    border-radius: 16px;
-    width: calc(40px * var(--lcs-spacing, 1));
-    min-width: calc(40px * var(--lcs-spacing, 1));
+    border-radius: 32px;
+    width: calc(44px * var(--lcs-spacing, 1));
+    min-width: calc(44px * var(--lcs-spacing, 1));
     &[data-focused=true] {
       outline: 1px solid rgba(var(--switch-color), 0.8);
       outline-offset: 0.5px;
     }
-    &[data-variant=solid] {
-      background-color: rgba(var(--panel-color), 0.8);
-      transition: background-color 100ms;
-    }
-    &[data-variant=outlined] {
-      border: 1px solid rgba(var(--panel-color), 0.8);
-      transition: border-color 100ms;
-      &[data-checked=true] {
-        border-color: rgba(var(--switch-color), 0.6);
-      }
-      &[data-hovered=true]:not([data-disabled=true], [data-readonly=true]),
-      &[data-focused=true]:not([data-disabled=true], [data-readonly=true]) {
-        border-color: rgba(var(--switch-color), 0.8);
-      }
-    }
-    &[data-variant=muted] {
-      background-color: rgba(var(--panel-color), 0.4);
-      transition: background-color 100ms;
-    }
     &[data-size=xs] {
-      width: calc(24px * var(--lcs-spacing, 1));
-      min-width: calc(24px * var(--lcs-spacing, 1));
+      width: calc(28px * var(--lcs-spacing, 1));
+      min-width: calc(28px * var(--lcs-spacing, 1));
     }
     &[data-size=sm] {
-      width: calc(32px * var(--lcs-spacing, 1));
-      min-width: calc(32px * var(--lcs-spacing, 1));
+      width: calc(36px * var(--lcs-spacing, 1));
+      min-width: calc(36px * var(--lcs-spacing, 1));
     }
     &[data-size=lg] {
-      width: calc(48px * var(--lcs-spacing, 1));
-      min-width: calc(48px * var(--lcs-spacing, 1));
+      width: calc(52px * var(--lcs-spacing, 1));
+      min-width: calc(52px * var(--lcs-spacing, 1));
     }
     &[data-size=xl] {
-      width: calc(64px * var(--lcs-spacing, 1));
-      min-width: calc(64px * var(--lcs-spacing, 1));
+      width: calc(68px * var(--lcs-spacing, 1));
+      min-width: calc(68px * var(--lcs-spacing, 1));
     }
     &.size {
-      width: var(--custom-size);
-      min-width: var(--custom-size);
+      border-radius: max(calc(var(--custom-size) / 2 + 2px), 16px);
+      width: calc(var(--custom-size) + 4px);
+      min-width: calc(var(--custom-size) + 4px);
+    }
+    &[data-variant=solid] {
+      background-color: rgb(var(--panel-color));
+      border: 2px solid rgb(var(--panel-color));
+      transition: background-color 100ms;
+    }
+    &[data-variant=outlined] {
+      background-color: rgba(var(--panel-color), 0.4);
+      border: 2px solid rgb(var(--panel-color));
+      transition: background-color 100ms;
+    }
+    &[data-variant=muted] {
+      background-color: rgba(var(--panel-color), 0.6);
+      border: 2px solid rgb(var(--panel-color));
+      transition: background-color 100ms;
     }
   }
 }
@@ -915,51 +1007,56 @@
   &[data-variant=solid] {
     outline: none;
     background-color: rgb(222, 222, 222);
+    box-shadow: var(--shadow-md);
     &::before {
-      background-color: rgba(var(--switch-color), 0.5);
+      background-color: rgba(var(--switch-color));
     }
     &[data-checked=true] {
       background-color: rgb(222, 222, 222);
     }
-    &[data-hovered=true]:not([data-disabled=true], [data-readonly=true]),
-    &[data-focused=true]:not([data-disabled=true], [data-readonly=true]) {
-      background-color: rgba(var(--switch-color), 0.9);
-      &::before {
-        background-color: rgb(var(--switch-color), 0.4);
+    &:not([data-disabled=true], [data-readonly=true]) {
+      &[data-hovered=true],
+      &[data-focused=true] {
+        &::before {
+          background-color: rgba(var(--switch-color), 0.7);
+        }
       }
     }
   }
   &[data-variant=outlined] {
     outline: none;
-    background-color: rgba(var(--panel-color), 0.8);
+    background-color: rgb(222, 222, 222);
     &::before {
-      background-color: rgba(var(--switch-color), 0.2);
+      background-color: rgba(var(--switch-color), 0.6);
     }
     &[data-checked=true] {
       background-color: rgb(222, 222, 222);
     }
-    &[data-hovered=true]:not([data-disabled=true], [data-readonly=true]),
-    &[data-focused=true]:not([data-disabled=true], [data-readonly=true]) {
-      background-color: rgba(var(--switch-color), 0.9);
-      &::before {
-        background-color: rgb(var(--switch-color), 0.4);
+    &:not([data-disabled=true], [data-readonly=true]) {
+      &[data-hovered=true],
+      &[data-focused=true] {
+        &::before {
+          background-color: rgba(var(--switch-color), 0.7);
+        }
       }
     }
   }
   &[data-variant=muted] {
     outline: none;
-    background-color: rgb(var(--panel-color));
+    background-color: rgba(var(--switch-color), 0.6);
     &::before {
-      background-color: rgba(var(--switch-color), 0.2);
+      background-color: rgba(var(--switch-color), 0.4);
     }
     &[data-checked=true] {
       background-color: rgb(var(--switch-color)) !important;
     }
-    &[data-hovered=true]:not([data-disabled=true], [data-readonly=true]),
-    &[data-focused=true]:not([data-disabled=true], [data-readonly=true]) {
-      background-color: rgba(var(--switch-color), 0.7);
-      &::before {
-        background-color: rgb(var(--switch-color), 0.4);
+    &:not([data-disabled=true], [data-readonly=true]) {
+      &[data-hovered=true],
+      &[data-focused=true] {
+        background-color: rgba(var(--switch-color), 0.7);
+        &::before {
+          background-color: rgb(var(--switch-color), 0.4);
+        }
       }
     }
   }
@@ -10143,4 +10240,3 @@
 @custom-media --lg (min-width: 1280px);
 @custom-media --xl (min-width: 1640px);
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
-/*# sourceMappingURL=index.css.map */