@seeqdev/qomponents 0.0.202 → 0.0.204

package/dist/src/Modal/Modal.types.d.ts

@@ -35,15 +35,16 @@ export interface ModalProps {
     /**
      * Main content of the modal body.
      * This is where you place the primary content, forms, information, or interactive elements.
-     * Must be a single React element (wrap multiple elements in a container if needed).
+     * Accepts any renderable React content: elements, strings, numbers, arrays, fragments, etc.
      */
-    children: React.ReactElement;
+    children: React.ReactNode;
     /**
      * Custom footer content that completely replaces the default button footer.
      * When provided, all default buttons (submit, cancel, custom) are hidden.
      * Use this when you need complete control over the footer layout and actions.
+     * Accepts any renderable React content: elements, strings, numbers, arrays, fragments, etc.
      */
-    modalFooter?: React.ReactElement;
+    modalFooter?: React.ReactNode;
     /**
      * Controls whether the modal is currently visible and open.
      * When true, the modal is displayed with overlay. When false, the modal is hidden.

package/dist/styles.css

@@ -415,12 +415,12 @@
   .tw\:h-5 {
     height: calc(var(--tw-spacing) * 5);
   }
-  .tw\:h-8 {
-    height: calc(var(--tw-spacing) * 8);
-  }
   .tw\:h-8\.5 {
     height: calc(var(--tw-spacing) * 8.5);
   }
+  .tw\:h-9 {
+    height: calc(var(--tw-spacing) * 9);
+  }
   .tw\:h-10 {
     height: calc(var(--tw-spacing) * 10);
   }
@@ -466,8 +466,8 @@
   .tw\:w-5 {
     width: calc(var(--tw-spacing) * 5);
   }
-  .tw\:w-8 {
-    width: calc(var(--tw-spacing) * 8);
+  .tw\:w-9 {
+    width: calc(var(--tw-spacing) * 9);
   }
   .tw\:w-10 {
     width: calc(var(--tw-spacing) * 10);
@@ -538,6 +538,9 @@
   .tw\:min-w-6 {
     min-width: calc(var(--tw-spacing) * 6);
   }
+  .tw\:min-w-9 {
+    min-width: calc(var(--tw-spacing) * 9);
+  }
   .tw\:min-w-24 {
     min-width: calc(var(--tw-spacing) * 24);
   }
@@ -889,6 +892,9 @@
   .tw\:bg-sq-field-disabled-gray {
     background-color: #efefef;
   }
+  .tw\:bg-sq-gray-highlight {
+    background-color: #f9f9f9;
+  }
   .tw\:bg-sq-hover-gray {
     background-color: var(--sq-hover-gray);
   }
@@ -1043,20 +1049,23 @@
     font-size: var(--tw-text-xs);
     line-height: var(--tw-leading, var(--tw-text-xs--line-height));
   }
+  .tw\:text-\[20px\] {
+    font-size: 20px;
+  }
   .tw\:text-sq-13 {
     font-size: 0.8125rem;
   }
   .tw\:text-sq-15 {
     font-size: 0.9375rem;
   }
+  .tw\:leading-4 {
+    --tw-leading: calc(var(--tw-spacing) * 4);
+    line-height: calc(var(--tw-spacing) * 4);
+  }
   .tw\:leading-4\.5 {
     --tw-leading: calc(var(--tw-spacing) * 4.5);
     line-height: calc(var(--tw-spacing) * 4.5);
   }
-  .tw\:leading-5 {
-    --tw-leading: calc(var(--tw-spacing) * 5);
-    line-height: calc(var(--tw-spacing) * 5);
-  }
   .tw\:leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -1065,10 +1074,6 @@
     --tw-leading: var(--tw-leading-normal);
     line-height: var(--tw-leading-normal);
   }
-  .tw\:font-\[600\] {
-    --tw-font-weight: 600;
-    font-weight: 600;
-  }
   .tw\:font-bold {
     --tw-font-weight: var(--tw-font-weight-bold);
     font-weight: var(--tw-font-weight-bold);
@@ -1154,9 +1159,9 @@
   .tw\:not-italic {
     font-style: normal;
   }
-  .tw\:placeholder-gray-400 {
+  .tw\:placeholder-gray-400\! {
     &::placeholder {
-      color: var(--tw-color-gray-400);
+      color: var(--tw-color-gray-400) !important;
     }
   }
   .tw\:opacity-0 {
@@ -1171,6 +1176,10 @@
   .tw\:opacity-70 {
     opacity: 70%;
   }
+  .tw\:shadow-\[0_4px_8px_rgba\(0\,0\,0\,0\.2\)\] {
+    --tw-shadow: 0 4px 8px var(--tw-shadow-color, rgba(0,0,0,0.2));
+    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-lg {
     --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);
@@ -1505,15 +1514,6 @@
       }
     }
   }
-  .tw\:checked\:hover\:border-sq-theme-dark {
-    &:checked {
-      &:hover {
-        @media (hover: hover) {
-          border-color: var(--theme-dark);
-        }
-      }
-    }
-  }
   .tw\:focus\:z-30 {
     &:focus {
       z-index: 30;
@@ -1718,6 +1718,17 @@
       }
     }
   }
+  .tw\:checked\:enabled\:hover\:border-sq-theme-dark {
+    &:checked {
+      &:enabled {
+        &:hover {
+          @media (hover: hover) {
+            border-color: var(--theme-dark);
+          }
+        }
+      }
+    }
+  }
   .tw\:disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
@@ -1878,6 +1889,11 @@
       background-color: #223249;
     }
   }
+  .tw\:dark\:bg-sq-gray-highlight-dark {
+    &:where(.tw-dark, .tw-dark *) {
+      background-color: #151b23;
+    }
+  }
   .tw\:dark\:bg-sq-multi-gray-dark {
     &:where(.tw-dark, .tw-dark *) {
       background-color: #262c36;
@@ -1968,10 +1984,10 @@
       color: var(--sqw-white);
     }
   }
-  .tw\:dark\:placeholder-sq-dark-text\/30 {
+  .tw\:dark\:placeholder-sq-dark-text\/30\! {
     &:where(.tw-dark, .tw-dark *) {
       &::placeholder {
-        color: color-mix(in oklab, #e6ecf2 30%, transparent);
+        color: color-mix(in oklab, #e6ecf2 30%, transparent) !important;
       }
     }
   }
@@ -2029,15 +2045,6 @@
       }
     }
   }
-  .tw\:dark\:hover\:bg-sq-dark-background {
-    &:where(.tw-dark, .tw-dark *) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: #0d1117;
-        }
-      }
-    }
-  }
   .tw\:dark\:hover\:bg-sq-field-disabled-gray\/30 {
     &:where(.tw-dark, .tw-dark *) {
       &:hover {
@@ -2250,6 +2257,17 @@
       }
     }
   }
+  .tw\:dark\:enabled\:hover\:bg-sq-dark-background {
+    &:where(.tw-dark, .tw-dark *) {
+      &:enabled {
+        &:hover {
+          @media (hover: hover) {
+            background-color: #0d1117;
+          }
+        }
+      }
+    }
+  }
   .tw\:dark\:disabled\:border-sq-fairly-dark-gray {
     &:where(.tw-dark, .tw-dark *) {
       &:disabled {

package/package.json

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