@seeqdev/qomponents 0.0.18 → 0.0.19

package/dist/index.js

@@ -197,11 +197,24 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
     return tooltip ? (React.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'].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 sizeClasses = {
+    sm: 'tw-text-sm',
+    lg: 'tw-text-xl',
+};
 /**
  * Textfield.
  */
 const TextField = React.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 = React.useRef(null);
     const [cursor, setCursor] = React.useState(null);
     const setAllRefs = (receivedRef) => {
@@ -229,17 +242,6 @@ const TextField = React.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';
@@ -247,7 +249,7 @@ const TextField = React.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.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 }));
 });
 
@@ -274,14 +276,16 @@ 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' +
+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-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 lightTheme = 'tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark 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(' ');
 /**
  * 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.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 }));
 };