@seeqdev/qomponents 0.0.193 → 0.0.202

package/dist/styles.css

@@ -532,6 +532,9 @@
   .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);
   }
@@ -722,6 +725,10 @@
     border-top-left-radius: var(--tw-radius-md);
     border-bottom-left-radius: var(--tw-radius-md);
   }
+  .tw\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
   .tw\:rounded-tl-md {
     border-top-left-radius: var(--tw-radius-md);
   }
@@ -813,6 +820,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);
   }
@@ -1178,10 +1188,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);
@@ -1387,10 +1393,10 @@
       }
     }
   }
-  .tw\:hover\:border-sq-bg-danger {
+  .tw\:hover\:border-sq-danger-hover {
     &:hover {
       @media (hover: hover) {
-        border-color: #f2dede;
+        border-color: #c9302c;
       }
     }
   }
@@ -1408,6 +1414,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) {
@@ -1415,10 +1435,10 @@
       }
     }
   }
-  .tw\:hover\:bg-sq-bg-danger {
+  .tw\:hover\:bg-sq-danger-hover {
     &:hover {
       @media (hover: hover) {
-        background-color: #f2dede;
+        background-color: #c9302c;
       }
     }
   }
@@ -1443,6 +1463,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) {
@@ -1508,16 +1542,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);
@@ -1582,16 +1651,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;
@@ -1602,6 +1696,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);
@@ -1876,11 +1975,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;
         }
       }
     }
@@ -1903,11 +2002,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) {
+          border-color: #ec971f;
+        }
+      }
+    }
+  }
+  .tw\:dark\:hover\:bg-sq-danger-hover {
     &:where(.tw-dark, .tw-dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: #f2dede;
+          background-color: #c9302c;
         }
       }
     }
@@ -1957,6 +2074,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) {
@@ -1966,6 +2101,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 {
@@ -1980,6 +2122,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 {
@@ -1987,6 +2150,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 {
@@ -1996,6 +2173,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 {
@@ -2010,6 +2194,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 {
@@ -2024,6 +2222,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 {
@@ -2031,6 +2236,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.193",
+  "version": "0.0.202",
+  "type": "module",
   "main": "dist/index.js",
   "source": "src/index.ts",
   "module": "dist/index.esm.js",
@@ -35,26 +36,27 @@
     "@rollup/plugin-node-resolve": "16.0.0",
     "@tailwindcss/forms": "0.5.3",
     "@tailwindcss/postcss": "4.1.18",
+    "@tailwindcss/vite": "4.1.12",
     "@testing-library/jest-dom": "6.4.6",
     "@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",
@@ -63,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",
@@ -88,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';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/src/SvgIcon/SvgIcon.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/SvgIcon/SvgIcon.test.d.ts

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