@seeqdev/qomponents 0.0.18 → 0.0.20

package/dist/TextArea/TextArea.types.d.ts

@@ -24,4 +24,6 @@ export interface TextAreaProps {
     testId?: string;
     /** value of the TextArea */
     value?: string | string[] | number;
+    /** if true error formatting will be displayed */
+    showError?: boolean;
 }

package/dist/TextArea/TextArea.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TextArea.types.js.map

package/dist/TextArea/TextArea.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.types.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.types.ts"],"names":[],"mappings":""}

package/dist/TextArea/index.js

@@ -0,0 +1,2 @@
+export { TextArea as default } from './TextArea';
+//# sourceMappingURL=index.js.map

package/dist/TextArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/TextField/TextField.js

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef, useState } from 'react';
+import '../styles.css';
+const errorClasses = 'tw-border-sq-danger-color';
+const borderColorClasses = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
+const baseClasses = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
+    ' disabled:tw-pointer-events-none' +
+    ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
+    '  dark:tw-placeholder-sq-dark-text-lighter specTextField';
+const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
+    ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';
+const lightTheme = 'tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
+const sizeClasses = {
+    sm: 'tw-text-sm',
+    lg: 'tw-text-xl',
+};
+/**
+ * Textfield.
+ */
+export const TextField = React.forwardRef((props, ref) => {
+    const { readonly = false, onChange, onKeyUp, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, } = props;
+    const internalRef = useRef(null);
+    const [cursor, setCursor] = useState(null);
+    const setAllRefs = (receivedRef) => {
+        if (ref)
+            ref.current = receivedRef;
+        internalRef.current = receivedRef;
+    };
+    useEffect(() => {
+        const input = internalRef.current;
+        if (input && type !== 'number')
+            input.setSelectionRange(cursor, cursor);
+    }, [ref, cursor, value]);
+    const handleChange = (e) => {
+        setCursor(e.target.selectionStart);
+        onChange && onChange(e);
+    };
+    useEffect(() => {
+        /**
+         * we need to change the value only if it's different since the internal state of "input" will change it anyway
+         * this will only be the case when the value has been changed externally via store (undo / redo)
+         */
+        if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {
+            // we need to use this method because using the value props directly will switch the input to a "controlled"
+            // component
+            internalRef.current.value = `${value}`;
+        }
+    }, [value]);
+    let borderRadius = 'tw-rounded-sm';
+    if (inputGroup === 'left') {
+        borderRadius = 'tw-rounded-l-sm tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
+    }
+    else if (inputGroup === 'right') {
+        borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
+    }
+    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
+    return (React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: "none", onChange: handleChange, onKeyUp: onKeyUp, step: step }));
+});
+//# sourceMappingURL=TextField.js.map

package/dist/TextField/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/TextField/TextField.tsx"],"names":[],"mappings":"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"}

package/dist/TextField/TextField.stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { TextField } from './TextField';
+export default {
+    title: 'TextField',
+};
+export const AllTextFields = () => {
+    const renderAllVariations = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4 light" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "value provided" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "placeholder text" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "with error", showError: true })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "read-only", readonly: true })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "large", size: "lg" }))),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "value provided" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "placeholder text" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "with error", showError: true })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "read-only", readonly: true })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "large", size: "lg" })))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderAllVariations())));
+};
+//# sourceMappingURL=TextField.stories.js.map

package/dist/TextField/TextField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.stories.js","sourceRoot":"","sources":["../../src/TextField/TextField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,eAAe;IACb,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC;QACE,6BAAK,SAAS,EAAC,cAAc;YAC3B,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAChC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACxC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,GAAI,CACnD;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC3C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,CACF;QAEN,6BAAK,SAAS,EAAC,yCAAyC;YACtD,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAChC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACxC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,GAAI,CACnD;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC3C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,CACF,CACL,CACJ,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/TextField/TextField.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TextField } from './TextField';
+describe('TextField', () => {
+    class Context {
+        testId = 'textFieldTestId';
+        props = {
+            onChange: jest.fn(),
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderTextField = (props) => render(React.createElement(TextField, { ...props }));
+    it('renders the provided value', () => {
+        const value = 'hello';
+        renderTextField({ ...tc.props, value });
+        expect(screen.getByDisplayValue(value)).toBeInTheDocument();
+    });
+    it('renders the provided placeholder', () => {
+        const placeholder = 'Prompt to enter';
+        renderTextField({ ...tc.props, placeholder });
+        expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
+    });
+    it('calls onChange handler', async () => {
+        renderTextField({ ...tc.props });
+        await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
+        expect(tc.props.onChange).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=TextField.test.js.map

package/dist/TextField/TextField.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.test.js","sourceRoot":"","sources":["../../src/TextField/TextField.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,MAAM,OAAO;QACX,MAAM,GAAG,iBAAiB,CAAC;QAC3B,KAAK,GAAmB;YACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE;YACnB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;KACH;IAED,IAAI,EAAW,CAAC;IAChB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IACH,MAAM,eAAe,GAAG,CAAC,KAAqB,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC,CAAC;IAEpF,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,MAAM,KAAK,GAAG,OAAO,CAAC;QACtB,eAAe,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QACxC,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;QAC1C,MAAM,WAAW,GAAG,iBAAiB,CAAC;QACtC,eAAe,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;QACtC,eAAe,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;QACjC,MAAM,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC;QAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -14,4 +14,6 @@ export interface TextFieldProps {
     ref?: any;
     inputGroup?: InputGroupPlacement;
     step?: number | string;
+    /** if true error formatting will be displayed */
+    showError?: boolean;
 }

package/dist/TextField/TextField.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TextField.types.js.map

package/dist/TextField/TextField.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.types.js","sourceRoot":"","sources":["../../src/TextField/TextField.types.ts"],"names":[],"mappings":""}

package/dist/TextField/index.js

@@ -0,0 +1,2 @@
+export { TextField as default } from './TextField';
+//# sourceMappingURL=index.js.map

package/dist/TextField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/dist/Tooltip/Tooltip.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import '../styles.css';
+import { DEFAULT_TOOL_TIP_DELAY } from './Tooltip.types';
+/**
+ * This component displays a Tooltip for the provided children.
+ */
+export const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
+    const arrowBaseClasses = "before:tw-content-[''] before:tw-absolute before:tw-border-8";
+    const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
+    const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
+    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
+  before:tw-border-l-transparent before:tw-border-r-black`;
+    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
+   before:tw-border-l-black before:tw-border-r-transparent`;
+    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
+  before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
+    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
+  before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
+    const placements = {
+        top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
+        left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,
+        right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
+        bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
+    };
+    return (React.createElement("div", { className: "tw-group tw-relative tw-inline-block" },
+        children,
+        React.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
+        tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}` }, text)));
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,sBAAsB,EAAgB,MAAM,iBAAiB,CAAC;AAEvE;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAA0C,CAAC,EAC7D,QAAQ,GAAG,QAAQ,EACnB,QAAQ,EACR,IAAI,EACJ,KAAK,GAAG,sBAAsB,GAC/B,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,8DAA8D,CAAC;IACxF,MAAM,qBAAqB,GAAG,8CAA8C,CAAC;IAC7E,MAAM,uBAAuB,GAAG,+CAA+C,CAAC;IAChF,MAAM,UAAU,GAAG,GAAG,gBAAgB,IAAI,qBAAqB;0DACP,CAAC;IAEzD,MAAM,SAAS,GAAG,GAAG,gBAAgB,IAAI,qBAAqB;2DACL,CAAC;IAE1D,MAAM,WAAW,GAAG,GAAG,gBAAgB,IAAI,uBAAuB;+FAC2B,CAAC;IAC9F,MAAM,QAAQ,GAAG,GAAG,gBAAgB,IAAI,uBAAuB;yFACwB,CAAC;IAExF,MAAM,UAAU,GAAG;QACjB,GAAG,EAAE,kEAAkE,QAAQ,EAAE;QACjF,IAAI,EAAE,kEAAkE,SAAS,EAAE;QACnF,KAAK,EAAE,kEAAkE,UAAU,EAAE;QACrF,MAAM,EAAE,oEAAoE,WAAW,EAAE;KAC1F,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,sCAAsC;QAClD,QAAQ;QACT,6BACE,SAAS,EAAE,4FAA4F,KAAK;qHACC,UAAU,CAAC,QAAQ,CAAC,EAAE,IAClI,IAAI,CACD,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Tooltip/Tooltip.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Tooltip } from './Tooltip';
+import Icon from '../Icon';
+import Button from '../Button';
+import { tooltipPositions } from './Tooltip.types';
+export default {
+    title: 'Tooltip',
+};
+export const AllTooltips = () => {
+    const renderButtonsWithTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_button` },
+        React.createElement(Tooltip, { text: `Tooltip on the ${position}`, position: position },
+            React.createElement(Button, { label: position })))));
+    const renderIconsWithHtmlTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_icon` },
+        React.createElement(Tooltip, { text: React.createElement("div", null,
+                React.createElement("h2", null, "Fancy Tooltip"),
+                " This is a special tooltip. Why?",
+                React.createElement("br", null),
+                "Because it supports ",
+                React.createElement("b", null, "HTML!")), position: position },
+            React.createElement(Icon, { icon: "fc-sun" })))));
+    const renderTextTooltipOnText = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text` },
+        React.createElement(Tooltip, { text: "Helpful information provided here", position: position },
+            React.createElement("span", null,
+                "Hover for Tooltip (on the ",
+                position,
+                ")")))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" },
+        renderButtonsWithTooltip(),
+        renderIconsWithHtmlTooltip(),
+        renderTextTooltipOnText()));
+};
+//# sourceMappingURL=Tooltip.stories.js.map

package/dist/Tooltip/Tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,wBAAwB,GAAG,GAAG,EAAE,CACpC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,SAAS;QAC5B,oBAAC,OAAO,IAAC,IAAI,EAAE,kBAAkB,QAAQ,EAAE,EAAE,QAAQ,EAAE,QAAQ;YAC7D,oBAAC,MAAM,IAAC,KAAK,EAAE,QAAQ,GAAI,CACnB,CACN,CACP,CAAC,CAAC;IAEL,MAAM,0BAA0B,GAAG,GAAG,EAAE,CACtC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,oBAAC,OAAO,IACN,IAAI,EACF;gBACE,gDAAsB;;gBACtB,+BAAM;;gBACc,uCAAY,CAC5B,EAER,QAAQ,EAAE,QAAQ;YAClB,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CACd,CACN,CACP,CAAC,CAAC;IAEL,MAAM,uBAAuB,GAAG,GAAG,EAAE,CACnC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,oBAAC,OAAO,IAAC,IAAI,EAAC,mCAAmC,EAAC,QAAQ,EAAE,QAAQ;YAClE;;gBAAiC,QAAQ;oBAAS,CAC1C,CACN,CACP,CAAC,CAAC;IAEL,OAAO,CACL,6BAAK,SAAS,EAAC,gDAAgD;QAC5D,wBAAwB,EAAE;QAC1B,0BAA0B,EAAE;QAC5B,uBAAuB,EAAE,CACtB,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Tooltip/Tooltip.types.js

@@ -0,0 +1,3 @@
+export const DEFAULT_TOOL_TIP_DELAY = 1000;
+export const tooltipPositions = ['top', 'left', 'right', 'bottom'];
+//# sourceMappingURL=Tooltip.types.js.map

package/dist/Tooltip/Tooltip.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,IAAI,CAAC;AAC3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAU,CAAC"}

package/dist/Tooltip/index.js

@@ -0,0 +1,2 @@
+export { Tooltip as default } from './Tooltip';
+//# sourceMappingURL=index.js.map

package/dist/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/example/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@seeqdev/qomponents": "0.0.15",
+    "@seeqdev/qomponents": "0.0.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/example/src/Example.tsx

@@ -53,7 +53,9 @@ function Example() {
           <b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
           available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use this
           property to provide only width, margins and padding. This will ensure for a smooth upgrade experience when
-          Seeq's look and feel changes.
+          Seeq's look and feel changes. <br />
+          Tip: to indicate missing or wrong user input use the <i>showError</i> property available on TextField,
+          TextArea, as well as Select.
         </p>
         <p>
           Using FontAwesome? You can pass FontAwesome Icons to the qomponent Icon component
@@ -83,9 +85,10 @@ function Example() {
         <div className="formRow">
           <div className="labelWidth">AddOn Name</div>
           <TextField
-            placeholder="provide a name"
+            placeholder="you must enter a name"
             extraClassNames="formElementWidth"
             value={textFieldValue}
+            showError={textFieldValue === ''}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTextFieldValue(e.target.value)}
           />
         </div>

package/dist/index.esm.js

@@ -177,11 +177,30 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
     return tooltip ? (React__default.createElement(Tooltip, { text: tooltip, ...tooltipOptions }, button)) : (button);
 };
 
+const errorClasses$2 = 'tw-border-sq-danger-color';
+const borderColorClasses$2 = [
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-sq-dark-disabled-gray',
+    'dark:focus:tw-border-sq-color-dark-dark',
+    'dark:active:tw-border-sq-color-dark-dark',
+    'focus:tw-border-sq-color-dark',
+    'active:tw-border-sq-color-dark',
+].join(' ');
+const baseClasses$3 = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
+    ' disabled:tw-pointer-events-none' +
+    ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
+    '  dark:tw-placeholder-sq-dark-text-lighter specTextField';
+const darkTheme$1 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text';
+const lightTheme$1 = 'tw-text-sq-text-color';
+const sizeClasses = {
+    sm: 'tw-text-sm',
+    lg: 'tw-text-xl',
+};
 /**
  * Textfield.
  */
 const TextField = React__default.forwardRef((props, ref) => {
-    const { readonly = false, onChange, onKeyUp, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, } = props;
+    const { readonly = false, onChange, onKeyUp, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, } = props;
     const internalRef = useRef(null);
     const [cursor, setCursor] = useState(null);
     const setAllRefs = (receivedRef) => {
@@ -209,17 +228,6 @@ const TextField = React__default.forwardRef((props, ref) => {
             internalRef.current.value = `${value}`;
         }
     }, [value]);
-    const baseClasses = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
-        ' disabled:tw-pointer-events-none' +
-        ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
-        '  dark:tw-placeholder-sq-dark-text-lighter specTextField';
-    const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
-        ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';
-    const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
-    const sizeClasses = {
-        sm: 'tw-text-sm',
-        lg: 'tw-text-xl',
-    };
     let borderRadius = 'tw-rounded-sm';
     if (inputGroup === 'left') {
         borderRadius = 'tw-rounded-l-sm tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
@@ -227,7 +235,7 @@ const TextField = React__default.forwardRef((props, ref) => {
     else if (inputGroup === 'right') {
         borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
     }
-    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius}`;
+    const appliedClasses = `${baseClasses$3} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$1} ${darkTheme$1} ${borderRadius} ${showError ? errorClasses$2 : borderColorClasses$2} `;
     return (React__default.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: "none", onChange: handleChange, onKeyUp: onKeyUp, step: step }));
 });
 
@@ -254,14 +262,22 @@ const Checkbox = (props) => {
 
 const baseClasses$1 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +
     ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
-const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
-    ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark dark:tw-placeholder-sq-dark-text-lighter';
-const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark tw-placeholder-gray-400';
+const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' + 'dark:tw-placeholder-sq-dark-text-lighter';
+const lightTheme = 'tw-text-sq-text-color tw-placeholder-gray-400';
+const errorClasses$1 = 'tw-border-sq-danger-color';
+const borderColorClasses$1 = [
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-sq-dark-disabled-gray',
+    'dark:focus:tw-border-sq-color-dark-dark',
+    'dark:active:tw-border-sq-color-dark-dark',
+    'focus:tw-border-sq-color-dark',
+    'active:tw-border-sq-color-dark',
+].join(' ');
 /**
  * TextArea.
  */
-const TextArea = ({ readonly = false, onChange, onKeyUp, id, name, rows = 3, cols = undefined, value, placeholder, extraClassNames, testId, autofocus = false, }) => {
-    const appliedClasses = `${baseClasses$1} ${extraClassNames} ${lightTheme} ${darkTheme}`;
+const TextArea = ({ readonly = false, onChange, onKeyUp, id, name, rows = 3, cols = undefined, value, placeholder, extraClassNames, testId, autofocus = false, showError, }) => {
+    const appliedClasses = `${baseClasses$1} ${extraClassNames} ${lightTheme} ${darkTheme} ${showError ? errorClasses$1 : borderColorClasses$1}`;
     return (React__default.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, onChange: onChange, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autofocus }));
 };