@seeqdev/qomponents 0.0.19 → 0.0.20

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

@@ -178,14 +178,20 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
 };
 
 const errorClasses$2 = 'tw-border-sq-danger-color';
-const borderColorClasses$2 = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
+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' +
-    ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';
-const lightTheme$1 = 'tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
+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',
@@ -256,11 +262,17 @@ 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-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-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'].join(' ');
+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.
  */