@seeqdev/qomponents 0.0.190 → 0.0.193

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,7 +1,6 @@
 import React from 'react';
 import { InputGroupProps } from './InputGroup.types';
-import '../styles.css';
 /**
  * InputGroup.
  */
-export declare const InputGroup: React.FunctionComponent<InputGroupProps>;
+export declare const InputGroup: React.ForwardRefExoticComponent<Omit<InputGroupProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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/Select/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './Select';
-export { components as SelectCompoents } from 'react-select';
+export { components as SelectComponents, type GroupBase, type OptionProps } from 'react-select';

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,7 +1,6 @@
 import React from 'react';
 import { TextAreaProps } from './TextArea.types';
-import '../styles.css';
 /**
  * TextArea.
  */
-export declare const TextArea: React.FunctionComponent<TextAreaProps>;
+export declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { InputLengthStyleProps, TextFieldProps } from './TextField.types';
-import '../styles.css';
 /**
  * Textfield.
  */
-export declare const TextField: React.FunctionComponent<TextFieldProps & InputLengthStyleProps>;
+export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps & InputLengthStyleProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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/src/index.d.ts

@@ -5,8 +5,7 @@ import Checkbox from './Checkbox';
 import TextArea from './TextArea';
 import { QTip, Tooltip } from './Tooltip';
 import Icon from './Icon';
-import Select from './Select';
-import { SelectCompoents } from './Select';
+import Select, { type GroupBase, type OptionProps, SelectComponents } from './Select';
 import Modal from './Modal';
 import Tabs from './Tabs';
 import Accordion from './Accordion';
@@ -28,8 +27,7 @@ export { TextArea };
 export { Tooltip };
 export { Checkbox };
 export { Icon };
-export { Select };
-export { SelectCompoents };
+export { Select, SelectComponents, type GroupBase, type OptionProps };
 export { QTip };
 export { Modal };
 export { Accordion };

package/dist/styles.css

@@ -906,6 +906,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 +1120,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 +1739,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 +1804,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 +1834,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 +3007,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 +3020,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 +3033,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 +3044,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 +3199,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 +3230,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 +3268,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 +3278,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,26 +1,28 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.190",
+  "version": "0.0.193",
   "main": "dist/index.js",
+  "source": "src/index.ts",
   "module": "dist/index.esm.js",
   "types": "dist/src/index.d.ts",
-  "skip-lib-check": true,
+  "style": "src/styles.css",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/src/index.d.ts"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
   "files": [
     "dist"
   ],
-  "repository": {
-    "type": "git",
-    "url": "TOOD"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "description": "A library that allows you to build native UIs ... TODO",
+  "description": "Seeq's UI component library built for React",
   "author": "Seeq",
   "license": "MIT",
-  "bugs": {
-    "url": "TODO"
-  },
   "homepage": "https://seeq12.github.io/qomponents-documentation/",
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -66,7 +68,9 @@
     "typescript": "5.9.3"
   },
   "dependencies": {
+    "@babel/runtime": "^7.28.4",
     "@floating-ui/dom": "1.6.3",
+    "@mantine/hooks": "^8.3.12",
     "@radix-ui/react-accordion": "1.2.12",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-dropdown-menu": "2.1.16",
@@ -85,7 +89,6 @@
   },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs",
-    "build:watch": "rollup -c --bundleConfigAsCjs --watch",
     "test": "cross-env TZ=UTC LANG=en-US jest",
     "test:watch": "cross-env TZ=UTC LANG=en-US jest --watch",
     "dev": "ladle serve",