@seeqdev/qomponents 0.0.194 → 0.0.203

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);
@@ -532,9 +532,15 @@
   .tw\:max-w-xs {
     max-width: var(--tw-container-xs);
   }
+  .tw\:min-w-5 {
+    min-width: calc(var(--tw-spacing) * 5);
+  }
   .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);
   }
@@ -817,6 +823,9 @@
   .tw\:border-sq-theme-dark {
     border-color: var(--theme-dark);
   }
+  .tw\:border-sq-theme-icon {
+    border-color: var(--theme-icon);
+  }
   .tw\:border-sq-warning {
     border-color: var(--sq-status-warning-color);
   }
@@ -1037,20 +1046,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;
@@ -1059,10 +1071,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);
@@ -1165,6 +1173,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);
@@ -1182,10 +1194,6 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
-  .tw\:duration-\[660ms\] {
-    --tw-duration: 660ms;
-    transition-duration: 660ms;
-  }
   .tw\:ease-in-out {
     --tw-ease: var(--tw-ease-in-out);
     transition-timing-function: var(--tw-ease-in-out);
@@ -1391,10 +1399,10 @@
       }
     }
   }
-  .tw\:hover\:border-sq-bg-danger {
+  .tw\:hover\:border-sq-danger-hover {
     &:hover {
       @media (hover: hover) {
-        border-color: #f2dede;
+        border-color: #c9302c;
       }
     }
   }
@@ -1412,6 +1420,20 @@
       }
     }
   }
+  .tw\:hover\:border-sq-theme-link {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--theme-link);
+      }
+    }
+  }
+  .tw\:hover\:border-sq-warning-hover {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #ec971f;
+      }
+    }
+  }
   .tw\:hover\:bg-green-500 {
     &:hover {
       @media (hover: hover) {
@@ -1419,10 +1441,10 @@
       }
     }
   }
-  .tw\:hover\:bg-sq-bg-danger {
+  .tw\:hover\:bg-sq-danger-hover {
     &:hover {
       @media (hover: hover) {
-        background-color: #f2dede;
+        background-color: #c9302c;
       }
     }
   }
@@ -1447,6 +1469,20 @@
       }
     }
   }
+  .tw\:hover\:bg-sq-theme-link {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--theme-link);
+      }
+    }
+  }
+  .tw\:hover\:bg-sq-warning-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #ec971f;
+      }
+    }
+  }
   .tw\:hover\:bg-sq-worksheetspanel-gray {
     &:hover {
       @media (hover: hover) {
@@ -1512,16 +1548,51 @@
       border-left-width: 1px;
     }
   }
+  .tw\:focus\:border-sq-danger-hover {
+    &:focus {
+      border-color: #c9302c;
+    }
+  }
   .tw\:focus\:border-sq-theme-dark {
     &:focus {
       border-color: var(--theme-dark);
     }
   }
+  .tw\:focus\:border-sq-theme-darker {
+    &:focus {
+      border-color: var(--theme-darker);
+    }
+  }
+  .tw\:focus\:border-sq-warning-hover {
+    &:focus {
+      border-color: #ec971f;
+    }
+  }
+  .tw\:focus\:bg-sq-danger-hover {
+    &:focus {
+      background-color: #c9302c;
+    }
+  }
   .tw\:focus\:bg-sq-dark-gray {
     &:focus {
       background-color: var(--sqw-dark-gray);
     }
   }
+  .tw\:focus\:bg-sq-light-gray {
+    &:focus {
+      background-color: var(--sqw-light-gray);
+    }
+  }
+  .tw\:focus\:bg-sq-theme-darker {
+    &:focus {
+      background-color: var(--theme-darker);
+    }
+  }
+  .tw\:focus\:bg-sq-warning-hover {
+    &:focus {
+      background-color: #ec971f;
+    }
+  }
   .tw\:focus\:text-sq-theme-dark {
     &:focus {
       color: var(--theme-dark);
@@ -1586,16 +1657,41 @@
       border-left-width: 1px;
     }
   }
+  .tw\:active\:border-sq-danger {
+    &:active {
+      border-color: var(--sqw-danger-color);
+    }
+  }
   .tw\:active\:border-sq-theme-dark {
     &:active {
       border-color: var(--theme-dark);
     }
   }
+  .tw\:active\:border-sq-theme-darker {
+    &:active {
+      border-color: var(--theme-darker);
+    }
+  }
+  .tw\:active\:border-sq-warning {
+    &:active {
+      border-color: var(--sq-status-warning-color);
+    }
+  }
+  .tw\:active\:bg-sq-danger {
+    &:active {
+      background-color: var(--sqw-danger-color);
+    }
+  }
   .tw\:active\:bg-sq-dark-gray {
     &:active {
       background-color: var(--sqw-dark-gray);
     }
   }
+  .tw\:active\:bg-sq-light-gray {
+    &:active {
+      background-color: var(--sqw-light-gray);
+    }
+  }
   .tw\:active\:bg-sq-overlay {
     &:active {
       background-color: #eeedee;
@@ -1606,6 +1702,11 @@
       background-color: var(--theme-darker);
     }
   }
+  .tw\:active\:bg-sq-warning {
+    &:active {
+      background-color: var(--sq-status-warning-color);
+    }
+  }
   .tw\:active\:bg-sq-worksheetspanel-gray {
     &:active {
       background-color: var(--sqw-worksheetspanel-gray);
@@ -1880,11 +1981,11 @@
       }
     }
   }
-  .tw\:dark\:hover\:border-sq-bg-danger {
+  .tw\:dark\:hover\:border-sq-danger-hover {
     &:where(.tw-dark, .tw-dark *) {
       &:hover {
         @media (hover: hover) {
-          border-color: #f2dede;
+          border-color: #c9302c;
         }
       }
     }
@@ -1907,11 +2008,29 @@
       }
     }
   }
-  .tw\:dark\:hover\:bg-sq-bg-danger {
+  .tw\:dark\:hover\:border-sq-theme-link {
+    &:where(.tw-dark, .tw-dark *) {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--theme-link);
+        }
+      }
+    }
+  }
+  .tw\:dark\:hover\:border-sq-warning-hover {
     &:where(.tw-dark, .tw-dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: #f2dede;
+          border-color: #ec971f;
+        }
+      }
+    }
+  }
+  .tw\:dark\:hover\:bg-sq-danger-hover {
+    &:where(.tw-dark, .tw-dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: #c9302c;
         }
       }
     }
@@ -1961,6 +2080,24 @@
       }
     }
   }
+  .tw\:dark\:hover\:bg-sq-theme-link {
+    &:where(.tw-dark, .tw-dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--theme-link);
+        }
+      }
+    }
+  }
+  .tw\:dark\:hover\:bg-sq-warning-hover {
+    &:where(.tw-dark, .tw-dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: #ec971f;
+        }
+      }
+    }
+  }
   .tw\:hover\:dark\:bg-gray-700 {
     &:hover {
       @media (hover: hover) {
@@ -1970,6 +2107,13 @@
       }
     }
   }
+  .tw\:dark\:focus\:border-sq-danger-hover {
+    &:where(.tw-dark, .tw-dark *) {
+      &:focus {
+        border-color: #c9302c;
+      }
+    }
+  }
   .tw\:dark\:focus\:border-sq-theme-dark {
     &:where(.tw-dark, .tw-dark *) {
       &:focus {
@@ -1984,6 +2128,27 @@
       }
     }
   }
+  .tw\:dark\:focus\:border-sq-warning-hover {
+    &:where(.tw-dark, .tw-dark *) {
+      &:focus {
+        border-color: #ec971f;
+      }
+    }
+  }
+  .tw\:dark\:focus\:bg-sq-danger-hover {
+    &:where(.tw-dark, .tw-dark *) {
+      &:focus {
+        background-color: #c9302c;
+      }
+    }
+  }
+  .tw\:dark\:focus\:bg-sq-highlight-color-dark {
+    &:where(.tw-dark, .tw-dark *) {
+      &:focus {
+        background-color: #151b23;
+      }
+    }
+  }
   .tw\:dark\:focus\:bg-sq-multi-gray-dark {
     &:where(.tw-dark, .tw-dark *) {
       &:focus {
@@ -1991,6 +2156,20 @@
       }
     }
   }
+  .tw\:dark\:focus\:bg-sq-theme-darker {
+    &:where(.tw-dark, .tw-dark *) {
+      &:focus {
+        background-color: var(--theme-darker);
+      }
+    }
+  }
+  .tw\:dark\:focus\:bg-sq-warning-hover {
+    &:where(.tw-dark, .tw-dark *) {
+      &:focus {
+        background-color: #ec971f;
+      }
+    }
+  }
   .tw\:dark\:checked\:focus\:bg-sq-dark-background {
     &:where(.tw-dark, .tw-dark *) {
       &:checked {
@@ -2000,6 +2179,13 @@
       }
     }
   }
+  .tw\:dark\:active\:border-sq-danger {
+    &:where(.tw-dark, .tw-dark *) {
+      &:active {
+        border-color: var(--sqw-danger-color);
+      }
+    }
+  }
   .tw\:dark\:active\:border-sq-theme-dark {
     &:where(.tw-dark, .tw-dark *) {
       &:active {
@@ -2014,6 +2200,20 @@
       }
     }
   }
+  .tw\:dark\:active\:border-sq-warning {
+    &:where(.tw-dark, .tw-dark *) {
+      &:active {
+        border-color: var(--sq-status-warning-color);
+      }
+    }
+  }
+  .tw\:dark\:active\:bg-sq-danger {
+    &:where(.tw-dark, .tw-dark *) {
+      &:active {
+        background-color: var(--sqw-danger-color);
+      }
+    }
+  }
   .tw\:dark\:active\:bg-sq-dark-disabled-gray\/30 {
     &:where(.tw-dark, .tw-dark *) {
       &:active {
@@ -2028,6 +2228,13 @@
       }
     }
   }
+  .tw\:dark\:active\:bg-sq-highlight-color-dark {
+    &:where(.tw-dark, .tw-dark *) {
+      &:active {
+        background-color: #151b23;
+      }
+    }
+  }
   .tw\:dark\:active\:bg-sq-multi-gray-dark {
     &:where(.tw-dark, .tw-dark *) {
       &:active {
@@ -2035,6 +2242,20 @@
       }
     }
   }
+  .tw\:dark\:active\:bg-sq-theme-darker {
+    &:where(.tw-dark, .tw-dark *) {
+      &:active {
+        background-color: var(--theme-darker);
+      }
+    }
+  }
+  .tw\:dark\:active\:bg-sq-warning {
+    &:where(.tw-dark, .tw-dark *) {
+      &:active {
+        background-color: var(--sq-status-warning-color);
+      }
+    }
+  }
   .tw\:dark\:disabled\:border-sq-fairly-dark-gray {
     &:where(.tw-dark, .tw-dark *) {
       &:disabled {

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.194",
+  "version": "0.0.203",
+  "type": "module",
   "main": "dist/index.js",
   "source": "src/index.ts",
   "module": "dist/index.esm.js",
@@ -40,22 +41,22 @@
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.5.2",
     "@types/dompurify": "3.0.5",
-    "@types/jest": "29.5.12",
     "@types/node": "18.13.0",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "@types/tinycolor2": "1.4.2",
     "@typescript/native-preview": "7.0.0-dev.20260102.1",
+    "@vitejs/plugin-react-swc": "4.2.3",
+    "@vitest/browser": "4.0.18",
+    "@vitest/browser-playwright": "4.0.18",
+    "@vitest/coverage-v8": "4.0.18",
     "autoprefixer": "10.4.17",
     "color": "4.2.3",
     "cross-env": "10.0.0",
+    "happy-dom": "20.6.1",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.7.0",
-    "jest-cli": "29.7.0",
-    "jest-environment-jsdom": "29.5.0",
-    "jest-junit": "16.0.0",
-    "jest-silent-reporter": "0.5.0",
     "postcss-import": "16.0.0",
+    "prettier": "^3.8.1",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "rollup": "4.22.4",
@@ -64,9 +65,11 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-typescript2": "0.36.0",
     "tailwindcss": "4.1.16",
-    "ts-jest": "29.1.2",
     "ts-node": "10.9.2",
-    "typescript": "5.9.3"
+    "typescript": "5.9.3",
+    "vite": "7.3.1",
+    "vitest": "4.0.18",
+    "vitest-fail-on-console": "0.7.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
@@ -89,9 +92,14 @@
     "tinycolor2": "1.4.1"
   },
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs",
-    "test": "cross-env TZ=UTC LANG=en-US jest",
-    "test:watch": "cross-env TZ=UTC LANG=en-US jest --watch",
+    "build": "rollup -c",
+    "test": "cross-env TZ=UTC LANG=en-US vitest run",
+    "test:unit": "cross-env TZ=UTC LANG=en-US vitest run --project=unit",
+    "test:component": "cross-env TZ=UTC LANG=en-US vitest run --project=component",
+    "test:browser": "cross-env TZ=UTC LANG=en-US vitest run --project=browser",
+    "test:browser:ui": "cross-env TZ=UTC LANG=en-US vitest --project=browser --browser.headless=false",
+    "test:watch": "cross-env TZ=UTC LANG=en-US vitest watch",
+    "test:coverage": "cross-env TZ=UTC LANG=en-US vitest run --coverage",
     "dev": "ladle serve",
     "lint": "echo 'ESLint not configured yet'",
     "lint:fix": "echo 'ESLint not configured yet'",

package/dist/src/Accordion/Accordion.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllAccordionVariants: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Accordion/Accordion.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/src/Alert/Alert.stories.d.ts

@@ -1,14 +0,0 @@
-import type { ReactElement } from 'react';
-import { AlertProps } from './Alert.types';
-interface Story<T> {
-    (args: T): ReactElement;
-    bind: (arg: any) => Story<T>;
-    args?: Partial<T>;
-}
-export declare const ThemedAlert: Story<AlertProps>;
-export declare const WarningAlert: Story<AlertProps>;
-export declare const DangerAlert: Story<AlertProps>;
-export declare const FormulaErrorAlert: Story<AlertProps>;
-export declare const GrayAlert: Story<AlertProps>;
-export declare const AllAlertsVariants: () => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/Alert/Alert.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/Button/Button.stories.d.ts

@@ -1,9 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllButtonVariants: () => import("react/jsx-runtime").JSX.Element;
-export declare const ButtonWithTooltip: () => import("react/jsx-runtime").JSX.Element;
-export declare const ButtonWithIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const DisabledButton: () => import("react/jsx-runtime").JSX.Element;
-export declare const ButtonSizes: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Button/Button.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/src/ButtonGroup/ButtonGroup.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllButtonGroups: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/ButtonGroup/ButtonGroup.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/ButtonWithDropdown/ButtonWithDropdown.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllButtonWithDropdownVariants: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/ButtonWithDropdown/ButtonWithDropdown.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/src/ButtonWithPopover/ButtonWithPopover.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllButtonWithPopoverVariants: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/ButtonWithPopover/ButtonWithPopover.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/src/Carousel/Carousel.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllCarousels: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Carousel/Carousel.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/src/Checkbox/Checkbox.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllCheckboxes: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Checkbox/Checkbox.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/src/Collapse/Collapse.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllCollapses: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Collapse/Collapse.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/src/Icon/Icon.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllIcons: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Icon/Icon.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/src/InputGroup/InputGroup.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllTextFields: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/InputGroup/InputGroup.test.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,10 +0,0 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllModalsVariants: React.FunctionComponent;
-export declare const ModalsWithDisabledSubmit: React.FunctionComponent;
-export declare const ModalsWithEditableTitle: React.FunctionComponent;
-export declare const ModalsWithCustomButton: React.FunctionComponent;
-export declare const ModalsWithVariantButton: React.FunctionComponent;

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

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';