@seeqdev/qomponents 0.0.159 → 0.0.161

package/dist/setupTests.d.ts

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

package/dist/setupTests.js

@@ -0,0 +1,6 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
+//# sourceMappingURL=setupTests.js.map

package/dist/setupTests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setupTests.js","sourceRoot":"","sources":["../src/setupTests.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,gCAAgC;AAChC,8CAA8C;AAC9C,0DAA0D;AAC1D,OAAO,2BAA2B,CAAC"}

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

@@ -1,7 +1,5 @@
 import React, { MouseEvent } from 'react';
 import { TooltipProps } from '../Tooltip/Tooltip.types';
-export declare const tooltipPositions: readonly ['top', 'left', 'right', 'bottom'];
-export type TooltipPosition = (typeof tooltipPositions)[number];
 export declare const toolbarButtonVariants: readonly ["outline", "theme", "theme-light", "warning", "danger", "no-border"];
 export type ToolbarButtonVariant = (typeof toolbarButtonVariants)[number];
 /**

package/dist/src/index.d.ts

@@ -43,3 +43,4 @@ export { Slider };
 export { ProgressBar };
 export { ButtonGroup };
 export { Carousel };
+export * from './types';

package/dist/src/types.d.ts

@@ -1,2 +1,27 @@
 export type InputGroupPlacement = 'left' | 'right' | undefined;
 export type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export * from './Accordion/Accordion.types';
+export * from './Alert/Alert.types';
+export * from './Button/Button.types';
+export * from './ButtonGroup/ButtonGroup.types';
+export * from './ButtonWithDropdown/ButtonWithDropdown.types';
+export * from './ButtonWithPopover/ButtonWithPopover.types';
+export * from './Carousel/Carousel.types';
+export * from './Checkbox/Checkbox.types';
+export * from './Collapse/Collapse.types';
+export * from './Icon/Icon.types';
+export * from './InputGroup/InputGroup.types';
+export * from './Modal/Modal.types';
+export * from './ProgressBar/ProgressBar.types';
+export * from './SeeqActionDropdown/SeeqActionDropdown.types';
+export * from './Select/Select.types';
+export * from './Slider/Slider.types';
+export * from './SvgIcon/SvgIcon.types';
+export * from './Tabs/Tabs.types';
+export * from './TextArea/TextArea.types';
+export * from './TextField/TextField.types';
+export * from './ToolbarButton/ToolbarButton.types';
+export * from './Tooltip/QTip.types';
+export * from './Tooltip/Tooltip.types';
+export type { ToolbarButtonVariant, ToolbarButtonProps } from './ToolbarButton/ToolbarButton.types';
+export { toolbarButtonVariants } from './ToolbarButton/ToolbarButton.types';

package/dist/styles.css

@@ -1599,20 +1599,20 @@ video {
         --sq-success-color: 114, 192, 44;
         --sq-icon: 4, 145, 194;
         --sq-link: 42, 92, 132;
-        --sq-dark-background: 36, 37, 37;
-        --sq-dark-text: 194, 188, 176;
-        --sq-dark-disabled-gray: 70, 73, 73;
-        --sq-highlight-color-dark: 36, 45, 49;
+        --sq-dark-background: 13, 17, 23;
+        --sq-dark-text: 240, 246, 252;
+        --sq-dark-disabled-gray: 34, 50, 73;
+        --sq-highlight-color-dark: 21, 27, 35;
         --sq-gray-highlight: 249, 249, 249;
-        --sq-gray-highlight-dark: 36, 45, 49;
+        --sq-gray-highlight-dark: 21, 27, 35;
         --sq-colored-hover: 238, 246, 253;
-        --sq-colored-hover-dark: 40, 42, 42;
-        --sq-multi-gray-dark: 66, 69, 69;
+        --sq-colored-hover-dark: 38, 44, 54;
+        --sq-multi-gray-dark: 38, 44, 54;
         --sq-field-disabled-gray: 239, 239, 239;
         --sq-overlay-gray: 238, 237, 238;
-        --sq-overlay-gray-dark: 36, 37, 37;
+        --sq-overlay-gray-dark: 13, 17, 23;
         --sq-worksheetspanel-gray: 241, 243, 244;
-        --sq-worksheetspanel-gray-dark: 42, 44, 44;
+        --sq-worksheetspanel-gray-dark: 21, 27, 35;
     }
 
 .color_topic {
@@ -1624,9 +1624,9 @@ video {
         --sq-link: 42, 92, 132;
         --sq-link-dark: 145, 180, 203;
         --sq-icon-dark: 4, 145, 194;
-        --sq-gray-highlight-dark: 36, 45, 49;
+        --sq-gray-highlight-dark: 21, 27, 35;
         --sq-colored-hover: 238, 246, 253;
-        --sq-colored-hover-dark: 40, 42, 42;
+        --sq-colored-hover-dark: 38, 44, 54;
     }
 
 .color_analysis {
@@ -1638,9 +1638,9 @@ video {
         --sq-link: 0, 121, 96;
         --sq-link-dark: 21, 99, 81;
         --sq-icon-dark: 23, 126, 77;
-        --sq-gray-highlight-dark: 36, 45, 49;
+        --sq-gray-highlight-dark: 21, 27, 35;
         --sq-colored-hover: 238, 248, 244;
-        --sq-colored-hover-dark: 33, 54, 47;
+        --sq-colored-hover-dark: 38, 44, 54;
     }
 
 .color_datalab {
@@ -1649,12 +1649,12 @@ video {
         --sq-color-light: 237, 247, 246;
         --sq-color-highlight: 244, 123, 62;
         --sq-icon: 242, 103, 34;
-        --sq-icon-dark: 36, 37, 37;
-        --sq-link-dark: 36, 37, 37;
+        --sq-icon-dark: 13, 17, 23;
+        --sq-link-dark: 13, 17, 23;
         --sq-link: 242, 103, 34;
-        --sq-gray-highlight-dark: 36, 45, 49;
+        --sq-gray-highlight-dark: 21, 27, 35;
         --sq-colored-hover: 241, 162, 120;
-        --sq-colored-hover-dark: 80, 43, 26;
+        --sq-colored-hover-dark: 38, 44, 54;
     }
 
 .color_vantage {
@@ -1666,9 +1666,9 @@ video {
         --sq-icon-dark: 120, 73, 169;
         --sq-link-dark: 163, 95, 236;
         --sq-link: 163, 95, 236;
-        --sq-gray-highlight-dark: 36, 45, 49;
+        --sq-gray-highlight-dark: 21, 27, 35;
         --sq-colored-hover: 208, 188, 229;
-        --sq-colored-hover-dark: 120, 73, 169;
+        --sq-colored-hover-dark: 38, 44, 54;
     }
 
 ol,

package/dist/types.d.ts

@@ -0,0 +1,27 @@
+export type InputGroupPlacement = 'left' | 'right' | undefined;
+export type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export * from './Accordion/Accordion.types';
+export * from './Alert/Alert.types';
+export * from './Button/Button.types';
+export * from './ButtonGroup/ButtonGroup.types';
+export * from './ButtonWithDropdown/ButtonWithDropdown.types';
+export * from './ButtonWithPopover/ButtonWithPopover.types';
+export * from './Carousel/Carousel.types';
+export * from './Checkbox/Checkbox.types';
+export * from './Collapse/Collapse.types';
+export * from './Icon/Icon.types';
+export * from './InputGroup/InputGroup.types';
+export * from './Modal/Modal.types';
+export * from './ProgressBar/ProgressBar.types';
+export * from './SeeqActionDropdown/SeeqActionDropdown.types';
+export * from './Select/Select.types';
+export * from './Slider/Slider.types';
+export * from './SvgIcon/SvgIcon.types';
+export * from './Tabs/Tabs.types';
+export * from './TextArea/TextArea.types';
+export * from './TextField/TextField.types';
+export * from './ToolbarButton/ToolbarButton.types';
+export * from './Tooltip/QTip.types';
+export * from './Tooltip/Tooltip.types';
+export type { ToolbarButtonVariant, ToolbarButtonProps } from './ToolbarButton/ToolbarButton.types';
+export { toolbarButtonVariants } from './ToolbarButton/ToolbarButton.types';

package/dist/types.js

@@ -0,0 +1,26 @@
+// Export all component types
+export * from './Accordion/Accordion.types';
+export * from './Alert/Alert.types';
+export * from './Button/Button.types';
+export * from './ButtonGroup/ButtonGroup.types';
+export * from './ButtonWithDropdown/ButtonWithDropdown.types';
+export * from './ButtonWithPopover/ButtonWithPopover.types';
+export * from './Carousel/Carousel.types';
+export * from './Checkbox/Checkbox.types';
+export * from './Collapse/Collapse.types';
+export * from './Icon/Icon.types';
+export * from './InputGroup/InputGroup.types';
+export * from './Modal/Modal.types';
+export * from './ProgressBar/ProgressBar.types';
+export * from './SeeqActionDropdown/SeeqActionDropdown.types';
+export * from './Select/Select.types';
+export * from './Slider/Slider.types';
+export * from './SvgIcon/SvgIcon.types';
+export * from './Tabs/Tabs.types';
+export * from './TextArea/TextArea.types';
+export * from './TextField/TextField.types';
+export * from './ToolbarButton/ToolbarButton.types';
+export * from './Tooltip/QTip.types';
+export * from './Tooltip/Tooltip.types';
+export { toolbarButtonVariants } from './ToolbarButton/ToolbarButton.types';
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAGA,6BAA6B;AAC7B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AAIxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC"}

package/dist/utils/browserId.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @exports the browser id (i.e., 'IE 11' 'Chrome 90')
+ * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript
+ */
+export declare const browserId: string;
+export declare const browserName: string;
+export declare const browserVersion: number;
+export declare const browserIsFirefox: boolean;
+export declare const browserIsEdgeBeforeChromium: boolean;

package/dist/utils/browserId.js

@@ -0,0 +1,29 @@
+/**
+ * @exports the browser id (i.e., 'IE 11' 'Chrome 90')
+ * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript
+ */
+export const browserId = (function () {
+    let tem;
+    const ua = navigator.userAgent;
+    let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+    if (/trident/i.test(M[1])) {
+        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
+        return `IE ${tem[1] || ''}`;
+    }
+    if (M[1] === 'Chrome') {
+        tem = ua.match(/\b(OPR|Edge?)\/(\d+)/);
+        if (tem !== null) {
+            return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');
+        }
+    }
+    M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
+    if ((tem = ua.match(/version\/(\d+)/i)) !== null) {
+        M.splice(1, 1, tem[1]);
+    }
+    return M.join(' ');
+})();
+export const browserName = browserId && browserId.split(' ', 2)[0];
+export const browserVersion = browserId && parseInt(browserId.split(' ', 2)[1], 10);
+export const browserIsFirefox = browserId && browserName === 'Firefox';
+export const browserIsEdgeBeforeChromium = browserName && browserVersion && browserName === 'Edge' && browserVersion < 70;
+//# sourceMappingURL=browserId.js.map

package/dist/utils/browserId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browserId.js","sourceRoot":"","sources":["../../src/utils/browserId.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW,CAAC;IAChC,IAAI,GAAG,CAAC;IACR,MAAM,EAAE,GAAG,SAAS,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,8DAA8D,CAAC,IAAI,EAAE,CAAC;IACvF,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1B,GAAG,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;QACvC,OAAO,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;IAC9B,CAAC;IAED,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE,CAAC;QACtB,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC;QACvC,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;YACjB,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACjF,CAAC;IACH,CAAC;IAED,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAC1E,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;QACjD,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACzB,CAAC;IAED,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACrB,CAAC,CAAC,EAAE,CAAC;AACL,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACnE,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,IAAI,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AACpF,MAAM,CAAC,MAAM,gBAAgB,GAAG,SAAS,IAAI,WAAW,KAAK,SAAS,CAAC;AACvE,MAAM,CAAC,MAAM,2BAA2B,GACtC,WAAW,IAAI,cAAc,IAAI,WAAW,KAAK,MAAM,IAAI,cAAc,GAAG,EAAE,CAAC"}

package/dist/utils/svg.d.ts

@@ -0,0 +1,15 @@
+export declare const SVG_PATH = "svgpath:";
+/**
+ * Determines if an icon is SVG
+ *
+ * @param icon - an icon string that will either be an icon class or an SVG path definition (e.g. "fa fa-wrench" or
+ * "svgpath:M 17.0181 0 ...")
+ */
+export declare function isSvgIcon(icon: string): boolean;
+/**
+ * Retrieves the SVG path from an SVG icon
+ *
+ * @param icon - an SVG icon string including path definition (e.g. "svgpath:M 17.0181 0 ...")
+ * @returns the SVG icon path or an empty string if the supplied icon is not SVG
+ */
+export declare function getSvgIconPath(icon: string): string;

package/dist/utils/svg.js

@@ -0,0 +1,20 @@
+export const SVG_PATH = 'svgpath:';
+/**
+ * Determines if an icon is SVG
+ *
+ * @param icon - an icon string that will either be an icon class or an SVG path definition (e.g. "fa fa-wrench" or
+ * "svgpath:M 17.0181 0 ...")
+ */
+export function isSvgIcon(icon) {
+    return icon.startsWith(SVG_PATH);
+}
+/**
+ * Retrieves the SVG path from an SVG icon
+ *
+ * @param icon - an SVG icon string including path definition (e.g. "svgpath:M 17.0181 0 ...")
+ * @returns the SVG icon path or an empty string if the supplied icon is not SVG
+ */
+export function getSvgIconPath(icon) {
+    return isSvgIcon(icon) ? icon.substring(SVG_PATH.length) : '';
+}
+//# sourceMappingURL=svg.js.map

package/dist/utils/svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.js","sourceRoot":"","sources":["../../src/utils/svg.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,IAAY;IACpC,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;AACnC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,IAAY;IACzC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAChE,CAAC"}

package/dist/utils/validateStyleDimension.d.ts

@@ -0,0 +1,2 @@
+import { DimensionStyle } from '../TextField/TextField.types';
+export declare const setValidInputDimension: (width?: number, height?: number) => DimensionStyle | undefined;

package/dist/utils/validateStyleDimension.js

@@ -0,0 +1,14 @@
+export const setValidInputDimension = (width, height) => {
+    let inputStyle;
+    if (typeof width === 'number' && width > 0) {
+        inputStyle = {
+            width: `${width}px`,
+        };
+    }
+    if (typeof height === 'number' && height > 0) {
+        inputStyle = inputStyle || {};
+        inputStyle['height'] = `${height}px`;
+    }
+    return inputStyle;
+};
+//# sourceMappingURL=validateStyleDimension.js.map

package/dist/utils/validateStyleDimension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validateStyleDimension.js","sourceRoot":"","sources":["../../src/utils/validateStyleDimension.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAc,EAAE,MAAe,EAA8B,EAAE;IACpG,IAAI,UAAsC,CAAC;IAC3C,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;QAC3C,UAAU,GAAG;YACX,KAAK,EAAE,GAAG,KAAK,IAAI;SACpB,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;QAC7C,UAAU,GAAG,UAAU,IAAI,EAAE,CAAC;QAC9B,UAAU,CAAC,QAAQ,CAAC,GAAG,GAAG,MAAM,IAAI,CAAC;IACvC,CAAC;IACD,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC"}

package/dist/utils/validateStyleDimension.test.d.ts

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

package/dist/utils/validateStyleDimension.test.js

@@ -0,0 +1,20 @@
+import { setValidInputDimension } from './validateStyleDimension';
+describe('setValidInputDimension', () => {
+    it('returns undefined if both width and height are undefined', () => {
+        const result = setValidInputDimension();
+        expect(result).toBeUndefined();
+    });
+    it('returns a DimensionStyle object with width if width is a valid number', () => {
+        const result = setValidInputDimension(300);
+        expect(result).toEqual({ width: '300px' });
+    });
+    it('returns a DimensionStyle object with height if height is a valid number', () => {
+        const result = setValidInputDimension(undefined, 400);
+        expect(result).toEqual({ height: '400px' });
+    });
+    it('returns a DimensionStyle object with both width and height if both are valid numbers', () => {
+        const result = setValidInputDimension(500, 600);
+        expect(result).toEqual({ width: '500px', height: '600px' });
+    });
+});
+//# sourceMappingURL=validateStyleDimension.test.js.map

package/dist/utils/validateStyleDimension.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validateStyleDimension.test.js","sourceRoot":"","sources":["../../src/utils/validateStyleDimension.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;QAClE,MAAM,MAAM,GAAG,sBAAsB,EAAE,CAAC;QACxC,MAAM,CAAC,MAAM,CAAC,CAAC,aAAa,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uEAAuE,EAAE,GAAG,EAAE;QAC/E,MAAM,MAAM,GAAG,sBAAsB,CAAC,GAAG,CAAC,CAAC;QAC3C,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yEAAyE,EAAE,GAAG,EAAE;QACjF,MAAM,MAAM,GAAG,sBAAsB,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;QACtD,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sFAAsF,EAAE,GAAG,EAAE;QAC9F,MAAM,MAAM,GAAG,sBAAsB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QAChD,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;IAC9D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.159",
+  "version": "0.0.161",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
-  "types": "dist/index.js",
+  "types": "dist/src/index.d.ts",
   "skip-lib-check": true,
   "files": [
     "dist"

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sources":["../src/Button/Button.types.ts","../src/Icon/Icon.types.ts","../src/Tooltip/Tooltip.types.ts"],"sourcesContent":["import { TooltipProps } from '../Tooltip/Tooltip.types';\nimport { IconType } from '../Icon/Icon.types';\nimport React from 'react';\n\nexport const buttonTypes = ['button', 'reset', 'submit', 'link'] as const;\nexport const buttonSizes = ['sm', 'lg'] as const;\nexport const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'] as const;\nexport const iconPositions = ['left', 'right'];\n\nexport type ButtonType = (typeof buttonTypes)[number];\nexport type ButtonSize = (typeof buttonSizes)[number];\nexport type ButtonVariant = (typeof buttonVariants)[number];\nexport type IconPosition = (typeof iconPositions)[number];\n\nexport interface ButtonProps {\n  /**\n   * Callback function triggered when the button is clicked.\n   * Receives the mouse event as a parameter for additional event handling.\n   * Use this to define the primary action the button should perform.\n   */\n  onClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * The text, element, or content to display inside the button.\n   * Can be a string for simple text, a translation key, or any React element/node\n   * for more complex content like formatted text or inline elements.\n   */\n  label?: string | React.JSX.Element | React.ReactNode;\n\n  /**\n   * Visual style variant that determines the button's appearance and color scheme:\n   * - `outline`: White background with border, suitable for secondary actions\n   * - `theme`: Primary theme colors, typically for main call-to-action buttons\n   * - `theme-light`: Lighter version of theme colors for subtle primary actions\n   * - `warning`: Yellow/orange styling for caution-related actions\n   * - `danger`: Red styling for destructive or critical actions\n   * - `no-border`: Borderless styling for minimal, text-like buttons\n   * @default 'outline'\n   */\n  variant?: ButtonVariant;\n\n  /**\n   * HTML button type attribute that determines the button's behavior in forms:\n   * - `button`: Standard button with no special form behavior (default)\n   * - `submit`: Submits the parent form when clicked\n   * - `reset`: Resets the parent form fields to their initial values\n   * - `link`: Behaves like a button but renders as button type for Firefox compatibility\n   * @default 'button'\n   */\n  type?: ButtonType;\n\n  /**\n   * Size variant that controls the button's dimensions and text size:\n   * - `sm`: Small button with compact padding and smaller text (default)\n   * - `lg`: Large button with generous padding and larger text\n   * @default 'sm'\n   */\n  size?: ButtonSize;\n\n  /**\n   * When true, disables the button preventing user interaction.\n   * Disabled buttons are visually dimmed and do not respond to clicks or focus.\n   * The button will also have `pointer-events: none` applied via CSS.\n   */\n  disabled?: boolean;\n\n  /**\n   * Additional CSS classes to apply to the button element.\n   * These classes are combined with the component's built-in styling classes.\n   * Use this to customize appearance beyond the standard variants.\n   */\n  extraClassNames?: string;\n\n  /**\n   * Icon class name to display alongside the button text.\n   * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').\n   * The icon is automatically styled to match the button's text color.\n   */\n  icon?: string;\n\n  /**\n   * Determines how the icon should be styled and colored:\n   * - `text`: Uses the button's text color (default)\n   * - `white`: Forces white color regardless of button variant\n   * - `theme`: Uses theme-specific colors\n   * - `color`: Uses a custom color specified in `iconColor`\n   * @default 'text'\n   */\n  iconStyle?: IconType;\n\n  /**\n   * Custom color for the icon when `iconStyle` is set to 'color'.\n   * Can be any valid CSS color value (hex, rgb, color name, etc.).\n   * This property is required when iconStyle is 'color'.\n   */\n  iconColor?: string;\n\n  /**\n   * Position of the icon relative to the button text:\n   * - `left`: Icon appears before the text with right margin\n   * - `right`: Icon appears after the text with left margin\n   * @default 'left'\n   */\n  iconPosition?: IconPosition;\n\n  /**\n   * Custom prefix for the icon class when not using standard FontAwesome icons.\n   * By default, icons are prefixed with 'fa-sharp fa-regular', but some icons\n   * require different prefixes. Use this to override the default behavior.\n   */\n  iconPrefix?: string;\n\n  /**\n   * HTML ID attribute for the button element.\n   * Should be unique across the entire page for proper HTML semantics.\n   * Also used as a prefix for the icon's test ID when an icon is present.\n   */\n  id?: string;\n\n  /**\n   * Test ID attribute for the button element used in automated testing.\n   * Applied to the `data-testid` attribute for element selection in test suites.\n   */\n  testId?: string;\n\n  /**\n   * Controls whether the click event should stop propagation to parent elements.\n   * When true (default), prevents the click from bubbling up the DOM tree.\n   * Set to false if you need parent elements to also handle the click event.\n   * @default true\n   */\n  stopPropagation?: boolean;\n\n  /**\n   * Tooltip text to display when hovering over the button.\n   * When provided, the button will show a tooltip with this text on hover.\n   * The tooltip appearance and behavior can be customized with `tooltipOptions`.\n   */\n  tooltip?: string;\n\n  /**\n   * When true, the tooltip text is rendered as HTML allowing for rich content.\n   * When false (default), the tooltip text is treated as plain text for security.\n   * Only set to true if you trust the tooltip content source.\n   * @default false\n   */\n  isHtmlTooltip?: boolean;\n\n  /**\n   * Test ID attribute specifically for the tooltip element.\n   * Used for automated testing to identify and interact with the tooltip.\n   * Helpful when you need to test tooltip-specific behavior separately from the button.\n   */\n  tooltipTestId?: string;\n\n  /**\n   * Configuration options for customizing tooltip behavior and appearance.\n   * Omits the 'text' property since that's handled by the `tooltip` prop.\n   * Includes options like position, delay, and other tooltip-specific settings.\n   */\n  tooltipOptions?: Omit<TooltipProps, 'text'>;\n\n  /**\n   * When true, prevents the blur event from occurring on mouse down.\n   * Useful when you want to keep focus on the current element after clicking the button.\n   * Commonly used in scenarios where button clicks shouldn't interrupt form input focus.\n   * @default false\n   */\n  preventBlur?: boolean;\n}\n","import { TooltipComponentProps } from '../Tooltip/Tooltip.types';\n\nexport const iconTypes = [\n  'theme',\n  'white',\n  'dark-gray',\n  'darkish-gray',\n  'gray',\n  'color',\n  'info',\n  'text',\n  'warning',\n  'inherit',\n  'danger',\n  'theme-light',\n  'success',\n] as const;\n\nexport type IconType = (typeof iconTypes)[number];\n\n/**\n * Props for the Icon component that renders customizable icons with various styling options.\n * Extends TooltipComponentProps to support tooltip functionality on the icon.\n */\nexport interface IconProps extends TooltipComponentProps {\n  /**\n   * Icon class name to display, typically from FontAwesome.\n   * Examples: 'fc-zoom', 'fc-delete', 'fc-save'. This determines which icon is rendered.\n   */\n  icon: string;\n\n  /**\n   * Custom prefix for the icon class when not using standard FontAwesome icons.\n   * By default, icons are prefixed with 'fa-sharp fa-regular', but some icons\n   * from different icon sets require specific prefixes. Use this to override the default.\n   */\n  iconPrefix?: string;\n\n  /**\n   * Visual style type that determines the icon's color and appearance:\n   * - `theme`: Uses primary theme colors (default)\n   * - `white`: Pure white color\n   * - `text`: Uses standard text color\n   * - `dark-gray`: Dark gray color\n   * - `darkish-gray`: Medium-dark gray color\n   * - `gray`: Standard gray color\n   * - `color`: Uses custom color specified in `color` prop\n   * - `info`: Blue informational color\n   * - `warning`: Yellow/orange warning color\n   * - `danger`: Red error/danger color\n   * - `success`: Green success color\n   * - `theme-light`: Lighter version of theme color\n   * - `inherit`: Inherits color from parent element\n   * @default 'theme'\n   */\n  type?: IconType;\n\n  /**\n   * Custom color value for the icon when `type` is set to 'color'.\n   * Can be any valid CSS color (hex, rgb, color names, etc.).\n   * This property is required when type is 'color'.\n   */\n  color?: string;\n\n  /**\n   * Callback function triggered when the icon is clicked.\n   * Receives the mouse event as a parameter. Use this to make icons interactive\n   * for actions like opening menus, triggering functions, or navigation.\n   */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => any;\n\n  /**\n   * Additional CSS classes to apply to the icon element.\n   * Use this to customize the icon's appearance, spacing, or behavior beyond built-in options.\n   */\n  extraClassNames?: string;\n\n  /**\n   * HTML ID attribute for the icon element.\n   * Should be unique across the page for proper HTML semantics and accessibility.\n   */\n  id?: string;\n\n  /**\n   * When true, applies the 'fa-lg' class to make the icon larger than normal size.\n   * Cannot be used together with the `small` prop. Useful for emphasis or better visibility.\n   */\n  large?: boolean;\n\n  /**\n   * When true, applies the 'fa-sm' class to make the icon smaller than normal size.\n   * Cannot be used together with the `large` prop. Useful for compact layouts or inline text.\n   */\n  small?: boolean;\n\n  /**\n   * Test ID attribute for the icon element used in automated testing.\n   * Applied to the `data-testid` attribute for element selection in test suites.\n   */\n  testId?: string;\n\n  /**\n   * Custom identifier placed in the `data-customid` attribute on the icon element.\n   * Useful for identifying the specific icon in event handlers when multiple icons\n   * share the same click handler. Helps distinguish which icon was clicked.\n   */\n  customId?: string;\n\n  /**\n   * Numeric value associated with the icon, purpose depends on specific use case.\n   * Can be used for ordering, counting, or any numeric data related to the icon.\n   */\n  number?: number;\n}\n","export const DEFAULT_TOOL_TIP_DELAY = 500;\nexport const tooltipPositions = ['top', 'left', 'right', 'bottom'] as const;\nimport React from 'react';\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n\nexport interface TooltipProps {\n  position?: TooltipPosition;\n  children?: React.JSX.Element | string;\n  text: React.JSX.Element | string;\n  delay?: number;\n}\n\nexport interface TooltipComponentProps {\n  /** text to display on tooltip */\n  tooltip?: string;\n  /** number of milliseconds to wait before showing a tooltip on-hover */\n  tooltipDelay?: number;\n  /** one of four possible tooltip positions */\n  tooltipPlacement?: TooltipPosition;\n  /** true if the provided tooltip text should be rendered as HTML */\n  isHtmlTooltip?: boolean;\n  /** optional testId applied to the tooltip - useful for testing */\n  tooltipTestId?: string;\n}\n"],"names":[],"mappings":";;AAIO,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAW;MAC7D,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAW;AACpC,MAAA,cAAc,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAW;MAChG,aAAa,GAAG,CAAC,MAAM,EAAE,OAAO;;ACLhC,MAAA,SAAS,GAAG;IACvB,OAAO;IACP,OAAO;IACP,WAAW;IACX,cAAc;IACd,MAAM;IACN,OAAO;IACP,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;IACR,aAAa;IACb,SAAS;;;ACfJ,MAAM,sBAAsB,GAAG,IAAI;AACnC,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ;;;;;;;;;;"}