@seeqdev/qomponents 0.0.94 → 0.0.96

package/dist/index.js

@@ -4695,11 +4695,11 @@ const borderColorClasses$2 = [
     '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-pointer-events-none disabled:tw-bg-sq-light-gray  disabled:dark:tw-bg-sq-dark-disabled-gray' +
     ' 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 darkTheme$1 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
+const lightTheme$1 = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
 const sizeClasses = {
     sm: 'tw-text-sm',
     lg: 'tw-text-xl',
@@ -4708,7 +4708,7 @@ const sizeClasses = {
  * Textfield.
  */
 const TextField = React.forwardRef((props, ref) => {
-    const { readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, } = props;
+    const { readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, } = props;
     const internalRef = React.useRef(null);
     const [cursor, setCursor] = React.useState(null);
     const setAllRefs = (receivedRef) => {
@@ -4718,7 +4718,7 @@ const TextField = React.forwardRef((props, ref) => {
     };
     React.useEffect(() => {
         const input = internalRef.current;
-        if (input && type !== 'number')
+        if (input && type !== 'number' && type !== 'email')
             input.setSelectionRange(cursor, cursor);
     }, [ref, cursor, value]);
     const handleChange = (e) => {
@@ -4744,13 +4744,18 @@ const TextField = React.forwardRef((props, ref) => {
         borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
     }
     const appliedClasses = `${baseClasses$3} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$1} ${darkTheme$1} ${borderRadius} ${showError ? errorClasses$2 : borderColorClasses$2} `;
-    const styleProp = setValidInputDimension(inputWidth, inputHeight)
+    const inputProp = setValidInputDimension(inputWidth, inputHeight)
         ? {
             style: setValidInputDimension(inputWidth, inputHeight),
         }
         : {};
+    const inputLenghtProp = {};
+    if (maxLength)
+        inputLenghtProp.maxLength = maxLength;
+    if (minLength)
+        inputLenghtProp.minLength = minLength;
     return (React.createElement(React.Fragment, null,
-        React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, ...styleProp }),
+        React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, autoFocus: autoFocus, ...inputLenghtProp, ...inputProp }),
         errorText && showError && React.createElement("div", { className: "tw-text-sq-danger-color tw-text-xs tw-mt-1" }, errorText)));
 });
 
@@ -4778,9 +4783,11 @@ const Checkbox = (props) => {
 };
 
 const baseClasses$1 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +
+    ' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray  disabled:dark:tw-bg-sq-dark-disabled-gray' +
     ' 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:tw-placeholder-sq-dark-text-lighter';
-const lightTheme = 'tw-text-sq-text-color 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  disabled:dark:tw-text-sq-dark-text-lighter';
+const lightTheme = 'tw-text-sq-text-color tw-placeholder-gray-400  disabled:tw-text-sq-darkish-gray';
 const errorClasses$1 = 'tw-border-sq-danger-color';
 const borderColorClasses$1 = [
     'tw-border-sq-disabled-gray',
@@ -4793,9 +4800,9 @@ const borderColorClasses$1 = [
 /**
  * TextArea.
  */
-const TextArea = ({ readonly = false, onChange, onKeyUp, id, name, rows = 3, cols = undefined, value, placeholder, extraClassNames, testId, autofocus = false, showError, }) => {
+const TextArea = ({ readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, rows = 3, cols = undefined, value, placeholder, showError, extraClassNames, testId, autoFocus = false, }) => {
     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 }));
+    return (React.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autoFocus }));
 };
 
 /**