@seeqdev/qomponents 0.0.110 → 0.0.112

package/dist/styles.css

@@ -1578,7 +1578,7 @@ video {
 
 .color_datalab {
         --sq-color-dark: 242, 103, 34;
-        --sq-color-dark-dark: 242, 103, 34;
+        --sq-color-dark-dark: 244, 123, 62;
         --sq-color-light: 237, 247, 246;
         --sq-color-highlight: 244, 123, 62;
         --sq-icon: 242, 103, 34;
@@ -1592,7 +1592,7 @@ video {
 
 .color_vantage {
         --sq-color-dark: 120, 73, 169;
-        --sq-color-dark-dark: 120, 73, 169;
+        --sq-color-dark-dark: 172, 119, 225;
         --sq-color-light: 163, 95, 236;
         --sq-color-highlight: 175, 149, 201;
         --sq-icon: 172, 119, 225;
@@ -2001,6 +2001,10 @@ ol,
     margin-top: -7px;
 }
 
+.tw-block {
+    display: block;
+}
+
 .tw-inline-block {
     display: inline-block;
 }
@@ -2033,6 +2037,10 @@ ol,
     height: 0.875rem;
 }
 
+.tw-h-5 {
+    height: 1.25rem;
+}
+
 .tw-h-8 {
     height: 2rem;
 }
@@ -2061,6 +2069,10 @@ ol,
     height: 45px;
 }
 
+.tw-h-\[5px\] {
+    height: 5px;
+}
+
 .tw-h-full {
     height: 100%;
 }
@@ -2183,6 +2195,10 @@ ol,
     flex-grow: 1;
 }
 
+.tw-grow {
+    flex-grow: 1;
+}
+
 .-tw-translate-x-1\/2 {
     --tw-translate-x: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2251,6 +2267,10 @@ ol,
     cursor: pointer;
 }
 
+.tw-touch-none {
+    touch-action: none;
+}
+
 .tw-select-none {
     -webkit-user-select: none;
        -moz-user-select: none;
@@ -2285,10 +2305,6 @@ ol,
     align-items: center;
 }
 
-.tw-items-stretch {
-    align-items: stretch;
-}
-
 .tw-justify-start {
     justify-content: flex-start;
 }
@@ -2349,6 +2365,10 @@ ol,
     border-radius: 3px;
 }
 
+.tw-rounded-\[4px\] {
+    border-radius: 4px;
+}
+
 .tw-rounded-full {
     border-radius: 9999px;
 }
@@ -2509,6 +2529,16 @@ ol,
     background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.tw-bg-green-400 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+}
+
+.tw-bg-red-400 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+}
+
 .tw-bg-sq-bg-warning-color {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-bg-warning-color));
@@ -2961,6 +2991,14 @@ ol,
     outline-offset: 2px;
 }
 
+.tw-transition {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
 .tw-transition-transform {
     transition-property: transform;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2975,6 +3013,10 @@ ol,
     transition-duration: 660ms;
 }
 
+.tw-ease-in-out {
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 /* Heads up! Before these colors can be used you must also add them to the tailwind.config.cjs! */
 
 /* Make sure to keep these colors in sync with the webserver/_custom_variables.scss values to ensure cohesive UIs */
@@ -3182,10 +3224,6 @@ ol,
     border-bottom-right-radius: 3px;
 }
 
-.last\:tw-border:last-child {
-    border-width: 1px;
-}
-
 .last\:tw-border-r-0:last-child {
     border-right-width: 0px;
 }
@@ -3356,6 +3394,18 @@ ol,
     outline-offset: 2px;
 }
 
+.active\:tw-z-30:active {
+    z-index: 30;
+}
+
+.active\:tw-z-50:active {
+    z-index: 50;
+}
+
+.active\:tw-border:active {
+    border-width: 1px;
+}
+
 .active\:tw-border-l:active {
     border-left-width: 1px;
 }
@@ -3369,6 +3419,11 @@ ol,
     border-color: rgb(var(--sq-color-dark));
 }
 
+.active\:tw-bg-sq-color-dark-dark:active {
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--sq-color-dark-dark));
+}
+
 .active\:tw-bg-sq-dark-gray:active {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-dark-gray));
@@ -3419,6 +3474,11 @@ ol,
     opacity: 1;
 }
 
+.aria-disabled\:tw-bg-sq-dark-gray[aria-disabled="true"] {
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--sq-dark-gray));
+}
+
 .data-\[disabled\]\:tw-pointer-events-none[data-disabled] {
     pointer-events: none;
 }
@@ -3770,3 +3830,8 @@ ol,
     --tw-text-opacity: 1;
     color: rgba(var(--sq-dark-text), 0.3);
 }
+
+.tw-dark .dark\:aria-disabled\:tw-bg-sq-dark-disabled-gray[aria-disabled="true"] {
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--sq-dark-disabled-gray));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.110",
+  "version": "0.0.112",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.js",
@@ -74,6 +74,7 @@
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-popover": "1.0.7",
+    "@radix-ui/react-slider": "1.2.2",
     "@radix-ui/react-progress": "1.1.1",
     "@radix-ui/react-tabs": "1.0.4",
     "dompurify": "3.2.3",