@seeqdev/qomponents 0.0.191 → 0.0.194

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../styles.css';
 import { AlertProps } from './Alert.types';
 /**
  * Alert.

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ButtonProps } from './Button.types';
-import '../styles.css';
 /**
  * All-in-one Button:
  *  - use "variant" to achieve the desired style

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../styles.css';
 import { ButtonGroupProps } from './ButtonGroup.types';
 /**
  * ButtonGroup.

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CheckboxProps } from './Checkbox.types';
-import '../styles.css';
 /**
  * Checkbox and Radio Box Component.
  */

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../styles.css';
 import { IconProps } from './Icon.types';
 /**
  * Icon:

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { InputGroupProps } from './InputGroup.types';
-import '../styles.css';
 /**
  * InputGroup.
  */

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../styles.css';
 import { ModalProps } from './Modal.types';
 declare const Modal: React.FunctionComponent<ModalProps>;
 export default Modal;

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

@@ -229,6 +229,11 @@ export interface ModalProps {
      * actions, 'danger' for destructive actions, or other variants as appropriate.
      */
     submitButtonVariant?: ButtonVariant;
+    /**
+     * ARIA attribute that references the ID of an element containing descriptive text for the modal.
+     * This prop is passed to the modal dialog element as `aria-describedby` for accessibility purposes.
+     */
+    ariaDescribedBy?: string;
     /**
      * Callback function triggered when the user clicks/taps outside the modal dialog.
      * Receives the pointer event. Use this to customize outside-click behavior,

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { SelectProps } from './Select.types';
-import '../styles.css';
 import { MultiValue as MV, SingleValue as SV } from 'react-select';
 export type MultiValue<T> = MV<T>;
 export type SingleValue<T> = SV<T>;

package/dist/src/SvgIcon/SvgIcon.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../styles.css';
 import { SvgIconProps } from './SvgIcon.types';
 /**
  * Renders an icon that has an SVG icon path (see {@link isSvgIcon() })

package/dist/src/TextArea/TextArea.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { TextAreaProps } from './TextArea.types';
-import '../styles.css';
 /**
  * TextArea.
  */

package/dist/src/TextField/TextField.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { InputLengthStyleProps, TextFieldProps } from './TextField.types';
-import '../styles.css';
 /**
  * Textfield.
  */

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

@@ -19,6 +19,13 @@ export interface TextFieldProps extends TooltipComponentProps {
      * your component state in controlled input scenarios.
      */
     onChange?: React.ChangeEventHandler<FormControlElement>;
+    /**
+     * Callback function triggered when the user pastes content into the text field.
+     * Receives the clipboard event with details about the pasted content.
+     * Useful for implementing custom paste handling, such as sanitizing input
+     * or preventing certain types of content from being pasted.
+     */
+    onPaste?: React.ClipboardEventHandler<FormControlElement>;
     /**
      * Callback function triggered when a key is released while the field has focus.
      * Useful for implementing search-as-you-type functionality or debounced input handling.

package/dist/src/Tooltip/Tooltip.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../styles.css';
 import { TooltipProps } from './Tooltip.types';
 /**
  * @deprecated

package/dist/src/index.build.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Build entry point for standalone qomponents dist/ package
+ * This imports Tailwind-enabled CSS and then re-exports everything
+ */
+import './styles.build.css';
+export * from './index';

package/dist/styles.css

@@ -722,6 +722,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);
   }
@@ -906,6 +910,9 @@
       background-color: color-mix(in oklab, var(--theme-highlight) 10%, transparent);
     }
   }
+  .tw\:bg-sq-theme-icon {
+    background-color: var(--theme-icon);
+  }
   .tw\:bg-sq-warning {
     background-color: var(--sq-status-warning-color);
   }
@@ -1117,6 +1124,9 @@
   .tw\:text-sq-theme-dark {
     color: var(--theme-dark);
   }
+  .tw\:text-sq-theme-icon {
+    color: var(--theme-icon);
+  }
   .tw\:text-sq-theme-light {
     color: var(--theme-light);
   }
@@ -1733,6 +1743,11 @@
       border-color: var(--theme-dark);
     }
   }
+  .tw\:dark\:border-sq-theme-icon {
+    &:where(.tw-dark, .tw-dark *) {
+      border-color: var(--theme-icon);
+    }
+  }
   .tw\:dark\:border-t-gray-700 {
     &:where(.tw-dark, .tw-dark *) {
       border-top-color: var(--tw-color-gray-700);
@@ -1793,6 +1808,11 @@
       background-color: var(--sq-light-gray-dark);
     }
   }
+  .tw\:dark\:bg-sq-theme-icon {
+    &:where(.tw-dark, .tw-dark *) {
+      background-color: var(--theme-icon);
+    }
+  }
   .tw\:dark\:bg-sq-tools-background-dark {
     &:where(.tw-dark, .tw-dark *) {
       background-color: #151b23;
@@ -1818,6 +1838,11 @@
       color: var(--sqw-fairly-dark-gray);
     }
   }
+  .tw\:dark\:text-sq-multi-gray-dark {
+    &:where(.tw-dark, .tw-dark *) {
+      color: #262c36;
+    }
+  }
   .tw\:dark\:text-sq-text-color {
     &:where(.tw-dark, .tw-dark *) {
       color: #3a3a3a;
@@ -2986,19 +3011,7 @@
   --sq-vantage-icon: #ac77e1;
   --sq-vantage-highlight: #af95c9ff;
   --sq-vantage-light: #d0bce5;
-  --theme-darker: var(--sq-analysis-darker);
-  --theme-dark: var(--sq-analysis-dark);
-  --theme-link: var(--sq-analysis-link);
-  --theme-icon: var(--sq-analysis-icon);
-  --theme-icon-activated: var(--sq-analysis-icon-activated);
-  --theme-highlight: var(--sq-analysis-highlight);
-  --theme-light: var(--sq-analysis-light);
-  --theme-header: var(--sq-analysis-dark);
-  --theme-footer-text: var(--sq-analysis-dark);
-  --theme-item-row: var(--sq-analysis-light);
-  --theme-highlight-background: var(--sq-analysis-light);
-  .color_topic,
-  .color_topic_dark {
+  .color_topic, .color_topic_dark {
     --theme-darker: var(--sq-topic-darker);
     --theme-dark: var(--sq-topic-dark);
     --theme-link: var(--sq-topic-link);
@@ -3011,8 +3024,7 @@
     --theme-item-row: var(--sq-topic-light);
     --theme-highlight-background: var(--sq-topic-light);
   }
-  .color_analysis,
-  .color_analysis_dark {
+  .color_analysis, .color_analysis_dark {
     --theme-darker: var(--sq-analysis-darker);
     --theme-dark: var(--sq-analysis-dark);
     --theme-link: var(--sq-analysis-link);
@@ -3025,8 +3037,7 @@
     --theme-item-row: var(--sq-analysis-light);
     --theme-highlight-background: var(--sq-analysis-light);
   }
-  .color_datalab,
-  .color_datalab_dark {
+  .color_datalab, .color_datalab_dark {
     --theme-darker: var(--sq-datalab-darker);
     --theme-dark: var(--sq-datalab-dark);
     --theme-link: var(--sq-datalab-link);
@@ -3037,8 +3048,7 @@
     --theme-footer-text: var(--sq-datalab-dark);
     --theme-highlight-background: var(--sq-datalab-light);
   }
-  .color_vantage,
-  .color_vantage_dark {
+  .color_vantage, .color_vantage_dark {
     --theme-darker: var(--sq-vantage-darker);
     --theme-dark: var(--sq-vantage-dark);
     --theme-link: var(--sq-vantage-link);
@@ -3193,12 +3203,6 @@
   --sq-report-color: #39516b;
   --sq-analysis-color: #427c63;
   --sq-datalab-color: #f26722;
-  --sq-homescreen-gradient: linear-gradient(15deg, #0c2e42 5%, #a3e5ec 65%);
-  --sq-homescreen-container: rgba(255, 255, 255, 0.7);
-  --sq-homescreen-current-folder: #ffffff;
-  --sq-homescreen-breadcrumb-link: #062f41;
-  --sq-homescreen-section-title: #0e1f2b;
-  --sq-homescreen-section-action: #717171;
   --sq-viewonly-gray: var(--sqw-dark-gray);
   --sq-selectedregion-xcursor: #000;
   --sq-noitems-gray: var(--sqw-darkish-gray);
@@ -3230,38 +3234,32 @@
     font-size: 0.8125rem;
     line-height: inherit;
   }
-  h1,
-  .h1 {
+  h1, .h1 {
     font-size: 2.025rem;
     margin-top: 0.75rem;
     margin-bottom: 0.5rem;
   }
-  h2,
-  .h2 {
+  h2, .h2 {
     font-size: 1.625rem;
     margin-top: 0.75rem;
     margin-bottom: 0.5rem;
   }
-  h3,
-  .h3 {
+  h3, .h3 {
     font-size: 1.42rem;
     margin-top: 0.75rem;
     margin-bottom: 0.5rem;
   }
-  h4,
-  .h4 {
+  h4, .h4 {
     font-size: var(--font-size-xxxlg);
     margin-top: 0.75rem;
     margin-bottom: 0.5rem;
   }
-  h5,
-  .h5 {
+  h5, .h5 {
     font-size: var(--font-size-xxlg);
     margin-top: 0.75rem;
     margin-bottom: 0.5rem;
   }
-  h6,
-  .h6 {
+  h6, .h6 {
     font-size: var(--font-size-xlg);
     margin-top: 0.75rem;
     margin-bottom: 0.5rem;
@@ -3274,12 +3272,7 @@
     text-align: left;
     font-weight: 600;
   }
-  button,
-  input,
-  select,
-  optgroup,
-  textarea,
-  ::file-selector-button {
+  button, input, select, optgroup, textarea, ::file-selector-button {
     background-color: inherit;
   }
 }
@@ -3289,20 +3282,16 @@
 .reactSelectMinHeightSmall {
   min-height: 22px !important;
 }
-[type='checkbox']:checked,
-[type='radio']:checked {
+[type='checkbox']:checked, [type='radio']:checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
-[type='checkbox']:disabled[type='checked'],
-[type='radio']:disabled[type='checked'] {
+[type='checkbox']:disabled[type='checked'], [type='radio']:disabled[type='checked'] {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23DDE1E3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
-.tw-dark [type='checkbox']:checked,
-.tw-dark [type='radio']:checked {
+.tw-dark [type='checkbox']:checked, .tw-dark [type='radio']:checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23C2BCB0' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
-.tw-dark [type='checkbox']:disabled[type='checked'],
-.tw-dark [type='radio']:disabled[type='checked'] {
+.tw-dark [type='checkbox']:disabled[type='checked'], .tw-dark [type='radio']:disabled[type='checked'] {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23606061' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
 @keyframes fadeIn {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.191",
+  "version": "0.0.194",
   "main": "dist/index.js",
   "source": "src/index.ts",
   "module": "dist/index.esm.js",
@@ -35,6 +35,7 @@
     "@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",