@seeqdev/qomponents 0.0.220 → 0.0.222

package/dist/styles.css

@@ -47,10 +47,13 @@
     --tw-font-weight-medium: 500;
     --tw-font-weight-semibold: 600;
     --tw-font-weight-bold: 700;
+    --tw-tracking-wide: 0.025em;
     --tw-leading-normal: 1.5;
     --tw-radius-sm: 0.25rem;
     --tw-radius-md: 0.375rem;
     --tw-radius-lg: 0.5rem;
+    --tw-radius-xl: 0.75rem;
+    --tw-ease-out: cubic-bezier(0, 0, 0.2, 1);
     --tw-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --tw-animate-spin: spin 1s linear infinite;
     --tw-default-transition-duration: 150ms;
@@ -334,6 +337,9 @@
   .tw\:mt-2 {
     margin-top: calc(var(--tw-spacing) * 2);
   }
+  .tw\:mt-3 {
+    margin-top: calc(var(--tw-spacing) * 3);
+  }
   .tw\:mr-1 {
     margin-right: calc(var(--tw-spacing) * 1);
   }
@@ -418,6 +424,12 @@
   .tw\:h-5 {
     height: calc(var(--tw-spacing) * 5);
   }
+  .tw\:h-6 {
+    height: calc(var(--tw-spacing) * 6);
+  }
+  .tw\:h-8 {
+    height: calc(var(--tw-spacing) * 8);
+  }
   .tw\:h-8\.5 {
     height: calc(var(--tw-spacing) * 8.5);
   }
@@ -469,6 +481,12 @@
   .tw\:w-5 {
     width: calc(var(--tw-spacing) * 5);
   }
+  .tw\:w-6 {
+    width: calc(var(--tw-spacing) * 6);
+  }
+  .tw\:w-8 {
+    width: calc(var(--tw-spacing) * 8);
+  }
   .tw\:w-9 {
     width: calc(var(--tw-spacing) * 9);
   }
@@ -653,6 +671,9 @@
   .tw\:items-end {
     align-items: flex-end;
   }
+  .tw\:items-start {
+    align-items: flex-start;
+  }
   .tw\:justify-between {
     justify-content: space-between;
   }
@@ -680,6 +701,9 @@
   .tw\:gap-4 {
     gap: calc(var(--tw-spacing) * 4);
   }
+  .tw\:gap-8 {
+    gap: calc(var(--tw-spacing) * 8);
+  }
   .tw\:self-end {
     align-self: flex-end;
   }
@@ -725,6 +749,9 @@
   .tw\:rounded-sm {
     border-radius: var(--tw-radius-sm);
   }
+  .tw\:rounded-xl {
+    border-radius: var(--tw-radius-xl);
+  }
   .tw\:rounded-t-md {
     border-top-left-radius: var(--tw-radius-md);
     border-top-right-radius: var(--tw-radius-md);
@@ -814,6 +841,9 @@
   .tw\:border-gray-100 {
     border-color: var(--tw-color-gray-100);
   }
+  .tw\:border-gray-700 {
+    border-color: var(--tw-color-gray-700);
+  }
   .tw\:border-red-100 {
     border-color: var(--tw-color-red-100);
   }
@@ -970,12 +1000,18 @@
   .tw\:p-2\.5 {
     padding: calc(var(--tw-spacing) * 2.5);
   }
+  .tw\:p-3 {
+    padding: calc(var(--tw-spacing) * 3);
+  }
   .tw\:p-4 {
     padding: calc(var(--tw-spacing) * 4);
   }
   .tw\:p-5 {
     padding: calc(var(--tw-spacing) * 5);
   }
+  .tw\:p-6 {
+    padding: calc(var(--tw-spacing) * 6);
+  }
   .tw\:p-8 {
     padding: calc(var(--tw-spacing) * 8);
   }
@@ -1009,9 +1045,15 @@
   .tw\:py-1 {
     padding-block: calc(var(--tw-spacing) * 1);
   }
+  .tw\:py-1\.5 {
+    padding-block: calc(var(--tw-spacing) * 1.5);
+  }
   .tw\:py-2 {
     padding-block: calc(var(--tw-spacing) * 2);
   }
+  .tw\:py-3 {
+    padding-block: calc(var(--tw-spacing) * 3);
+  }
   .tw\:py-4 {
     padding-block: calc(var(--tw-spacing) * 4);
   }
@@ -1117,6 +1159,10 @@
     --tw-font-weight: var(--tw-font-weight-semibold);
     font-weight: var(--tw-font-weight-semibold);
   }
+  .tw\:tracking-wide {
+    --tw-tracking: var(--tw-tracking-wide);
+    letter-spacing: var(--tw-tracking-wide);
+  }
   .tw\:text-ellipsis {
     text-overflow: ellipsis;
   }
@@ -1141,6 +1187,9 @@
   .tw\:text-sq-dark-gray {
     color: var(--sqw-dark-gray);
   }
+  .tw\:text-sq-dark-text {
+    color: #e6ecf2;
+  }
   .tw\:text-sq-darkish-gray {
     color: var(--sqw-darkish-gray);
   }
@@ -1153,6 +1202,9 @@
   .tw\:text-sq-fairly-dark-gray {
     color: var(--sqw-fairly-dark-gray);
   }
+  .tw\:text-sq-muted {
+    color: var(--sq-gray-text);
+  }
   .tw\:text-sq-success {
     color: var(--sqw-success-color);
   }
@@ -1189,6 +1241,9 @@
   .tw\:capitalize {
     text-transform: capitalize;
   }
+  .tw\:uppercase {
+    text-transform: uppercase;
+  }
   .tw\:italic {
     font-style: italic;
   }
@@ -1220,19 +1275,40 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .tw\:shadow-md {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .tw\:shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .tw\:shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .tw\:transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--tw-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--tw-default-transition-duration));
   }
+  .tw\:transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--tw-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--tw-default-transition-duration));
+  }
+  .tw\:duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .tw\:ease-in-out {
     --tw-ease: var(--tw-ease-in-out);
     transition-timing-function: var(--tw-ease-in-out);
   }
+  .tw\:ease-out {
+    --tw-ease: var(--tw-ease-out);
+    transition-timing-function: var(--tw-ease-out);
+  }
   .tw\:outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1427,6 +1503,14 @@
       outline-style: none;
     }
   }
+  .tw\:hover\:-translate-y-px {
+    &:hover {
+      @media (hover: hover) {
+        --tw-translate-y: -1px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .tw\:hover\:cursor-pointer {
     &:hover {
       @media (hover: hover) {
@@ -1546,6 +1630,14 @@
       }
     }
   }
+  .tw\:hover\:shadow-md {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
   .tw\:focus\:z-30 {
     &:focus {
       z-index: 30;
@@ -1649,6 +1741,26 @@
       }
     }
   }
+  .tw\:focus-visible\:ring-2 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .tw\:focus-visible\:ring-sq-theme-link\/30 {
+    &:focus-visible {
+      --tw-ring-color: var(--theme-link);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--theme-link) 30%, transparent);
+      }
+    }
+  }
+  .tw\:focus-visible\:ring-offset-1 {
+    &:focus-visible {
+      --tw-ring-offset-width: 1px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
   .tw\:focus-visible\:outline-none {
     &:focus-visible {
       --tw-outline-style: none;
@@ -1862,6 +1974,11 @@
       border-width: 1px;
     }
   }
+  .tw\:dark\:border-gray-400 {
+    &:where(.tw-dark, .tw-dark *) {
+      border-color: var(--tw-color-gray-400);
+    }
+  }
   .tw\:dark\:border-gray-500 {
     &:where(.tw-dark, .tw-dark *) {
       border-color: var(--tw-color-gray-500);
@@ -2243,6 +2360,13 @@
       }
     }
   }
+  .tw\:dark\:focus-visible\:ring-offset-sq-dark-background {
+    &:where(.tw-dark, .tw-dark *) {
+      &:focus-visible {
+        --tw-ring-offset-color: #0d1117;
+      }
+    }
+  }
   .tw\:dark\:active\:border-sq-danger {
     &:where(.tw-dark, .tw-dark *) {
       &:active {
@@ -3355,6 +3479,10 @@
   --sq-insights-icon: #0086e8;
   --sq-insights-highlight: #0086e8;
   --sq-insights-light: #cce7ff;
+  --sq-segmented-control-color: var(--sq-topic-dark);
+  --sq-segmented-control-gradient-start: #d9ecff;
+  --sq-segmented-control-gradient-hover-start: #c7e3ff;
+  --sq-segmented-control-dark-gradient-start: var(--sq-topic-highlight);
   .color_topic, .color_topic_dark {
     --theme-darker: var(--sq-topic-darker);
     --theme-dark: var(--sq-topic-dark);
@@ -3367,6 +3495,10 @@
     --theme-footer-text: var(--sq-topic-dark);
     --theme-item-row: var(--sq-topic-light);
     --theme-highlight-background: var(--sq-topic-light);
+    --sq-segmented-control-color: #1f5f9f;
+    --sq-segmented-control-gradient-start: #d9ecff;
+    --sq-segmented-control-gradient-hover-start: #c7e3ff;
+    --sq-segmented-control-dark-gradient-start: #41a5e1;
   }
   .color_analysis, .color_analysis_dark {
     --theme-darker: var(--sq-analysis-darker);
@@ -3380,6 +3512,10 @@
     --theme-footer-text: var(--sq-analysis-dark);
     --theme-item-row: var(--sq-analysis-light);
     --theme-highlight-background: var(--sq-analysis-light);
+    --sq-segmented-control-color: var(--sq-analysis-dark);
+    --sq-segmented-control-gradient-start: var(--sq-analysis-light);
+    --sq-segmented-control-gradient-hover-start: #dff2ee;
+    --sq-segmented-control-dark-gradient-start: var(--sq-analysis-highlight);
   }
   .color_datalab, .color_datalab_dark {
     --theme-darker: var(--sq-datalab-darker);
@@ -3391,6 +3527,10 @@
     --theme-header: var(--sq-datalab-dark);
     --theme-footer-text: var(--sq-datalab-dark);
     --theme-highlight-background: var(--sq-datalab-light);
+    --sq-segmented-control-color: #b95b22;
+    --sq-segmented-control-gradient-start: #ffe6d6;
+    --sq-segmented-control-gradient-hover-start: #ffd9bf;
+    --sq-segmented-control-dark-gradient-start: #e58a52;
   }
   .color_vantage, .color_vantage_dark {
     --theme-darker: var(--sq-vantage-darker);
@@ -3402,6 +3542,10 @@
     --theme-header: var(--sq-vantage-dark);
     --theme-footer-text: var(--sq-vantage-dark);
     --theme-highlight-background: var(--sq-vantage-light);
+    --sq-segmented-control-color: var(--sq-vantage-dark);
+    --sq-segmented-control-gradient-start: var(--sq-vantage-light);
+    --sq-segmented-control-gradient-hover-start: #c5addd;
+    --sq-segmented-control-dark-gradient-start: var(--sq-vantage-highlight);
   }
   .color_insights, .color_insights_dark {
     --theme-darker: var(--sq-insights-darker);
@@ -3413,6 +3557,10 @@
     --theme-header: var(--sq-insights-dark);
     --theme-footer-text: var(--sq-insights-dark);
     --theme-highlight-background: var(--sq-insights-light);
+    --sq-segmented-control-color: var(--sq-insights-dark);
+    --sq-segmented-control-gradient-start: var(--sq-insights-light);
+    --sq-segmented-control-gradient-hover-start: #b8dcff;
+    --sq-segmented-control-dark-gradient-start: var(--sq-insights-highlight);
   }
   --height-inputs: 34px;
   --height-30: 30px;
@@ -3634,6 +3782,65 @@
     background-color: inherit;
   }
 }
+@layer components {
+  .sq-segmented-control-pill {
+    background-image: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+    border-color: var(--sq-tool-btn-border);
+    color: var(--sq-gray-text);
+  }
+  .sq-segmented-control-pill--inactive:hover {
+    background-image: linear-gradient(0deg, var(--sq-segmented-control-gradient-start) 0%, transparent 100%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+    border-color: var(--sq-segmented-control-color);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb, var(--sq-segmented-control-color) 40%, transparent);
+    }
+    color: var(--sqw-text-color);
+  }
+  .sq-segmented-control-pill.sq-segmented-control-pill--active {
+    background-image: linear-gradient(0deg, var(--sq-segmented-control-gradient-start) 0%, transparent 100%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+    border-color: var(--sq-segmented-control-color);
+    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
+    color: var(--sqw-text-color);
+  }
+  .sq-segmented-control-pill.sq-segmented-control-pill--active:hover {
+    background-image: linear-gradient(0deg, var(--sq-segmented-control-gradient-hover-start) 0%, transparent 100%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
+    color: var(--sqw-text-color);
+  }
+  .tw-dark .sq-segmented-control-pill {
+    background-image: linear-gradient(180deg, #1f2937 0%, #151b23 100%);
+    border-color: var(--color-sq-dark-disabled-gray);
+    color: var(--color-sq-dark-text);
+  }
+  .tw-dark .sq-segmented-control-pill--inactive:hover {
+    background-image: linear-gradient( 0deg, var(--sq-segmented-control-dark-gradient-start) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-image: linear-gradient( 0deg, color-mix(in srgb, var(--sq-segmented-control-dark-gradient-start) 30%, transparent) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
+    }
+    border-color: var(--theme-highlight);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb, var(--theme-highlight) 60%, transparent);
+    }
+    color: var(--sqw-white);
+  }
+  .tw-dark .sq-segmented-control-pill.sq-segmented-control-pill--active {
+    background-image: linear-gradient( 0deg, var(--sq-segmented-control-dark-gradient-start) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-image: linear-gradient( 0deg, color-mix(in srgb, var(--sq-segmented-control-dark-gradient-start) 54%, transparent) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
+    }
+    border-color: var(--theme-highlight);
+    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
+    color: var(--sqw-white);
+  }
+  .tw-dark .sq-segmented-control-pill.sq-segmented-control-pill--active:hover {
+    background-image: linear-gradient( 0deg, var(--sq-segmented-control-dark-gradient-start) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-image: linear-gradient( 0deg, color-mix(in srgb, var(--sq-segmented-control-dark-gradient-start) 64%, transparent) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
+    }
+    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
+    color: var(--sqw-white);
+  }
+}
 .reactSelectMinHeight {
   min-height: 34px !important;
 }
@@ -3711,6 +3918,46 @@
 .svgContainer path {
   transform: translateX(0.5px) translateY(0.5px);
 }
+.loading-spinner, .fa-spinner, .fa-circle-notch.fa-spin, .fa-refresh.fa-spin {
+  --spinner-size: 40px;
+  --thickness: 7px;
+  position: relative;
+  display: inline-block;
+  flex: 0 0 auto;
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  color: var(--spinner-color, var(--theme-dark, var(--sq-theme-color, #4086c4)));
+  line-height: 1;
+  vertical-align: middle;
+  border-radius: 50%;
+  background: conic-gradient(from 0deg, transparent, currentColor);
+  -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - var(--thickness)), black calc(100% - var(--thickness) + 0.5px) );
+  mask: radial-gradient( farthest-side, transparent calc(100% - var(--thickness)), black calc(100% - var(--thickness) + 0.5px) );
+  animation: spin 1s linear infinite;
+}
+.loading-spinner::before, .fa-spinner::before, .fa-circle-notch.fa-spin::before, .fa-refresh.fa-spin::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: var(--thickness);
+  height: var(--thickness);
+  background: currentColor;
+  border-radius: 50%;
+  transform: translateX(-50%);
+}
+.loading-spinner-icon, .fa-spinner, .fa-circle-notch.fa-spin, .fa-refresh.fa-spin {
+  --spinner-size: 1em;
+  --thickness: 0.18em;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -3739,6 +3986,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -3804,6 +4055,10 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-ease {
   syntax: "*";
   inherits: false;
@@ -3891,6 +4146,7 @@
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -3905,6 +4161,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.220",
+  "version": "0.0.222",
   "type": "module",
   "main": "dist/index.js",
   "source": "src/index.ts",