@seeqdev/qomponents 0.0.203 → 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

@@ -892,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);
   }
@@ -1156,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 {
@@ -1511,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;
@@ -1724,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;
@@ -1884,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;
@@ -1974,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;
       }
     }
   }
@@ -2035,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 {
@@ -2256,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.203",
+  "version": "0.0.204",
   "type": "module",
   "main": "dist/index.js",
   "source": "src/index.ts",