@aleodoni-common/tailwind-components - npm Package Compare versions

Comparing version 1.0.86 to 1.0.87

build/helpers/colors.d.ts

 export declare const defaultTheme: {
     default: string;
+    errorColor: string;
     defaultBGColor: string;
@@ -4,0 +5,0 @@ input: {

build/helpers/input.d.ts

@@ -10,2 +10,4 @@ import * as SolidIcons from '@heroicons/react/solid';
     aleodoni_outlineicon?: 'true' | 'false';
+    aleodoni_error?: 'true' | 'false';
+    aleodoni_errortext?: string;
 }
@@ -23,4 +25,5 @@ export interface IMaskInput extends NumberFormatProps {
 export declare const getIcon: (icon: IconName | undefined, isOutline: string) => any;
-export declare const getInputClassName: (paddingHorizontal: string, ringColor: string) => string;
+export declare const getInputClassName: (paddingHorizontal: string, ringColor: string, hasError: boolean) => string;
 export declare const getIconClassName: () => string;
 export declare const getDivInputClassName: () => string;
+export declare const getErrorTextClassName: () => string;

build/index.js

@@ -11,2 +11,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
   "default": 'theme-light',
+  errorColor: 'aleodoni-700',
   defaultBGColor: 'aleodoni-100',
@@ -68,4 +69,4 @@ input: {
 };
-var getInputClassName = function getInputClassName(paddingHorizontal, ringColor) {
-  return "\n    w-full\n    " + paddingHorizontal + "\n    py-2\n    border\n    rounded-md\n    border-" + defaultTheme.input.borderColor + "\n    placeholder-" + defaultTheme.input.placeholderColor + "\n    text-" + defaultTheme.input.textColor + "\n    focus:outline-none\n    focus:ring-2\n    focus:ring-" + ringColor + "\n  ";
+var getInputClassName = function getInputClassName(paddingHorizontal, ringColor, hasError) {
+  return "\n    w-full\n    " + paddingHorizontal + "\n    py-2\n    border\n    rounded-md\n    border-" + defaultTheme.input.borderColor + "\n    placeholder-" + defaultTheme.input.placeholderColor + "\n    text-" + defaultTheme.input.textColor + "\n    focus:outline-none\n    focus:ring-2\n    focus:ring-" + (hasError ? defaultTheme.errorColor : ringColor) + "\n  ";
 };
@@ -78,2 +79,5 @@ var getIconClassName = function getIconClassName() {
 };
+var getErrorTextClassName = function getErrorTextClassName() {
+  return "\n    text-xs,\n    text" + defaultTheme.errorColor + "\n  ";
+};
 
@@ -86,9 +90,14 @@ var Input = function Input(props) {
       aleodoni_outlineicon = _props$aleodoni_outli === void 0 ? inputDefaults.outlineicon : _props$aleodoni_outli,
+      _props$aleodoni_error = props.aleodoni_error,
+      aleodoni_error = _props$aleodoni_error === void 0 ? 'false' : _props$aleodoni_error,
+      aleodoni_errortext = props.aleodoni_errortext,
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type;
+  var hasError = !(aleodoni_error === 'false');
   var pH = getPaddingHorizontal(aleodoni_inputicon);
   var TheIcon = getIcon(aleodoni_inputicon, aleodoni_outlineicon);
-  var inputClassName = getInputClassName(pH, aleodoni_ringcolor);
+  var inputClassName = getInputClassName(pH, aleodoni_ringcolor, hasError);
   var divClassName = getDivInputClassName();
   var iconClassName = getIconClassName();
+  var errorTextClassName = getErrorTextClassName();
   return React__default.createElement("div", {
@@ -101,3 +110,5 @@ className: divClassName
     className: inputClassName
-  }, props)));
+  }, props)), hasError && React__default.createElement("span", {
+    className: errorTextClassName
+  }, aleodoni_errortext));
 };
@@ -189,2 +200,4 @@
     aleodoni_outlineicon: "true",
+    aleodoni_error: "true",
+    aleodoni_errortext: "Password too short",
     onChange: function onChange(e) {
@@ -191,0 +204,0 @@ return setFormPassword(e.target.value);

build/index.modern.js

@@ -8,2 +8,3 @@ import React, { useState } from 'react';
   "default": 'theme-light',
+  errorColor: 'aleodoni-700',
   defaultBGColor: 'aleodoni-100',
@@ -65,4 +66,4 @@ input: {
 };
-var getInputClassName = function getInputClassName(paddingHorizontal, ringColor) {
-  return "\n    w-full\n    " + paddingHorizontal + "\n    py-2\n    border\n    rounded-md\n    border-" + defaultTheme.input.borderColor + "\n    placeholder-" + defaultTheme.input.placeholderColor + "\n    text-" + defaultTheme.input.textColor + "\n    focus:outline-none\n    focus:ring-2\n    focus:ring-" + ringColor + "\n  ";
+var getInputClassName = function getInputClassName(paddingHorizontal, ringColor, hasError) {
+  return "\n    w-full\n    " + paddingHorizontal + "\n    py-2\n    border\n    rounded-md\n    border-" + defaultTheme.input.borderColor + "\n    placeholder-" + defaultTheme.input.placeholderColor + "\n    text-" + defaultTheme.input.textColor + "\n    focus:outline-none\n    focus:ring-2\n    focus:ring-" + (hasError ? defaultTheme.errorColor : ringColor) + "\n  ";
 };
@@ -75,2 +76,5 @@ var getIconClassName = function getIconClassName() {
 };
+var getErrorTextClassName = function getErrorTextClassName() {
+  return "\n    text-xs,\n    text" + defaultTheme.errorColor + "\n  ";
+};
 
@@ -83,9 +87,14 @@ var Input = function Input(props) {
       aleodoni_outlineicon = _props$aleodoni_outli === void 0 ? inputDefaults.outlineicon : _props$aleodoni_outli,
+      _props$aleodoni_error = props.aleodoni_error,
+      aleodoni_error = _props$aleodoni_error === void 0 ? 'false' : _props$aleodoni_error,
+      aleodoni_errortext = props.aleodoni_errortext,
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type;
+  var hasError = !(aleodoni_error === 'false');
   var pH = getPaddingHorizontal(aleodoni_inputicon);
   var TheIcon = getIcon(aleodoni_inputicon, aleodoni_outlineicon);
-  var inputClassName = getInputClassName(pH, aleodoni_ringcolor);
+  var inputClassName = getInputClassName(pH, aleodoni_ringcolor, hasError);
   var divClassName = getDivInputClassName();
   var iconClassName = getIconClassName();
+  var errorTextClassName = getErrorTextClassName();
   return React.createElement("div", {
@@ -98,3 +107,5 @@ className: divClassName
     className: inputClassName
-  }, props)));
+  }, props)), hasError && React.createElement("span", {
+    className: errorTextClassName
+  }, aleodoni_errortext));
 };
@@ -186,2 +197,4 @@
     aleodoni_outlineicon: "true",
+    aleodoni_error: "true",
+    aleodoni_errortext: "Password too short",
     onChange: function onChange(e) {
@@ -188,0 +201,0 @@ return setFormPassword(e.target.value);

package.json

 {
   "name": "@aleodoni-common/tailwind-components",
-  "version": "1.0.86",
+  "version": "1.0.87",
   "main": "./build/index.js",
@@ -5,0 +5,0 @@ "module": "build/index.modern.js",

No alert changes

Improved metrics

Total package byte prevSize

85737

increased by5.11%

Lines of code

1291

increased by2.38%

No dependency changes