@bodynarf/react.components 1.3.11 → 1.4.1

package/common.scss

@@ -0,0 +1,3 @@
+.help.m-help {
+    white-space: pre-line;
+}

package/components/anchor/components/anchorWithIcon/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AnchorWithIconProps } from "../../types";
 /** Anchor with icon component */
 export declare const AnchorWithIcon: ({ href, className, onClick, caption, title, target, icon }: AnchorWithIconProps) => JSX.Element;

package/components/anchor/components/anchorWithIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/anchorWithIcon/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,KAAG,WAqChH,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/anchorWithIcon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,KAAG,WAqChH,CAAC"}

package/components/anchor/components/simpleAnchor/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SimpleAnchorProps } from "../../types";
 /** Simple anchor component, without icon */
 export declare const SimpleAnchor: ({ href, className, onClick, caption, title, target }: SimpleAnchorProps) => JSX.Element;

package/components/anchor/components/simpleAnchor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/simpleAnchor/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,yDAA0D,iBAAiB,KAAG,WAYtG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/simpleAnchor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,yDAA0D,iBAAiB,KAAG,WAYtG,CAAC"}

package/components/button/components/buttonWithIcon/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ButtonWithIconProps } from '../../types';
 /** Button with icon component */
 export declare const ButtonWithIcon: ({ className, disabled, onClick, caption, title, icon }: ButtonWithIconProps) => JSX.Element;

package/components/button/components/buttonWithIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,2DAA4D,mBAAmB,KAAG,WAsC5G,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,2DAA4D,mBAAmB,KAAG,WAsC5G,CAAC"}

package/components/button/components/simpleButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SimpleButtonProps } from '../../types';
 /** Simple button component, without icon */
 export declare const SimpleButton: ({ className, disabled, onClick, caption, title }: SimpleButtonProps) => JSX.Element;

package/components/button/components/simpleButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/simpleButton/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,qDAAsD,iBAAiB,KAAG,WAWlG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/simpleButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,qDAAsD,iBAAiB,KAAG,WAWlG,CAAC"}

package/components/dropdown/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './dropdown.scss';
 import { SelectableItem } from './types';
 import { BaseElementProps } from '../types';

package/components/dropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,kGAAmG,aAAa,KAAG,WA4FhI,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":";AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,kGAAmG,aAAa,KAAG,WA4FhI,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/primitives/checkbox/checkbox.scss

@@ -1,4 +1,4 @@
-.is-checkradio[type="checkbox"].has-background-color.m-has-background-color:not(:checked) + label::before {
+.is-checkradio[type="checkbox"].m-check-radio.has-background-color.m-has-background-color:not(:checked) + label::before {
     border-color: #dbdbdb !important;
     background-color: transparent !important;
 }

package/components/primitives/checkbox/index.d.ts

@@ -1,15 +1,19 @@
-import './checkbox.scss';
+import "./checkbox.scss";
 import { BaseInputElementProps } from "../types";
 export declare type CheckBoxProps = BaseInputElementProps<boolean> & {
     /** Is full colored checkbox */
     block?: boolean;
     /** Remove the checkbox border */
     withoutBorder?: boolean;
-    /** Checkbox has background color */
+    /**
+     * Checkbox has background color.
+     * Only works if style is set
+    */
     hasBackgroundColor?: boolean;
     /**
      * Set unchecked background as transparent.
-     * Only used with `hasBackgroundColor`
+     * Only used with `hasBackgroundColor` set as `true`
+     * @example `{ style: InputColor.Info, hasBackgrounColor: true, fixBackgroundColor: true }` -
     */
     fixBackgroundColor?: boolean;
 };

package/components/primitives/checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/index.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEjD,oBAAY,aAAa,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG;IACzD,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,oCAAoC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;MAGE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,QAAQ,+IAKX,aAAa,KAAG,WAsClB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/index.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEjD,oBAAY,aAAa,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG;IACzD,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;MAGE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;MAIE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,QAAQ,+IAKX,aAAa,KAAG,WAsClB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/primitives/checkbox/index.js

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
-import './checkbox.scss';
+import "./checkbox.scss";
 const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor }) => {
     const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
     const id = name || generateGuid();
     const className = getClassName([
-        "m-check-radio",
         "is-checkradio",
-        hasBackgroundColor == true ? "has-background-color" : "",
-        fixBackgroundColor === true && hasBackgroundColor == true ? "m-has-background-color" : "",
-        isNullOrUndefined(style) ? "" : size === 'normal' ? "" : `is-${size}`,
-        rounded === true ? "is-circle" : "",
+        "m-check-radio",
+        (hasBackgroundColor ?? false) ? "has-background-color" : "",
+        (fixBackgroundColor ?? false) && (hasBackgroundColor ?? false) ? "m-has-background-color" : "",
+        isNullOrUndefined(size) ? "" : size === "normal" ? "" : `is-${size}`,
+        (rounded ?? false) ? "is-circle" : "",
         isNullOrUndefined(style) ? "" : `is-${style}`,
-        block === true ? "is-block" : "",
-        withoutBorder === true ? "has-no-border" : "",
+        (block ?? false) ? "is-block" : "",
+        (withoutBorder ?? false) ? "has-no-border" : "",
     ]);
     return (_jsxs("div", { className: "field", children: [_jsx("input", { type: "checkbox", name: id, id: id, disabled: disabled, onChange: onChecked, className: className, defaultChecked: defaultValue }), _jsx("label", { htmlFor: id, children: label?.caption })] }));
 };

package/components/primitives/date/index.d.ts

@@ -1,12 +1,13 @@
-import { BaseInputElementProps, InputLabel } from '../types';
+import "../../../common.scss";
+import { BaseInputElementProps, InputLabel } from "../types";
 /** Date input conponent props type */
-export declare type DateProps = Omit<BaseInputElementProps<Date | undefined>, 'placeholder'> & {
+export declare type DateProps = Omit<BaseInputElementProps<Date | undefined>, "placeholder"> & {
     /** Label configuration */
     label: InputLabel;
     /** Focus out event handler */
     onBlur?: () => void;
 };
 /** Date input component */
-declare const DatePicker: (props: DateProps) => JSX.Element;
+declare const DatePicker: ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, className, rounded, loading, style, label, onBlur }: DateProps) => JSX.Element;
 export default DatePicker;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/date/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/date/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7D,sCAAsC;AACtC,oBAAY,SAAS,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,GAAG,SAAS,CAAC,EAAE,aAAa,CAAC,GAAG;IACnF,0BAA0B;IAC1B,KAAK,EAAE,UAAU,CAAC;IAElB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAA;AAED,2BAA2B;AAC3B,QAAA,MAAM,UAAU,UAAW,SAAS,KAAG,WAwGtC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/date/index.tsx"],"names":[],"mappings":"AAIA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAa,MAAM,UAAU,CAAC;AAGxE,sCAAsC;AACtC,oBAAY,SAAS,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,GAAG,SAAS,CAAC,EAAE,aAAa,CAAC,GAAG;IACnF,0BAA0B;IAC1B,KAAK,EAAE,UAAU,CAAC;IAElB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAA;AAED,2BAA2B;AAC3B,QAAA,MAAM,UAAU,wIAMb,SAAS,KAAG,WA4Gd,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/primitives/date/index.js

@@ -1,45 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { generateGuid, getClassName, isStringEmpty } from '@bodynarf/utils';
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault, isStringEmpty } from "@bodynarf/utils";
+import "../../../common.scss";
+import { InputSize } from "../types";
+import { getValidationValues } from "../../../utils";
 /** Date input component */
-const DatePicker = (props) => {
-    const onValueChange = useCallback((event) => props.onValueChange(isStringEmpty(event.target.value)
+const DatePicker = ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, className, rounded, loading, style, label, onBlur }) => {
+    const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value)
         ? undefined
-        : new Date(event.target.value)), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.onValueChange]);
-    const id = props.name || generateGuid();
-    const size = `is-${(props.size || 'normal')}`;
-    const className = getClassName([
-        props.className,
-        size,
-        props.rounded === true ? 'is-rounded' : '',
+        : new Date(event.target.value)), [onValueChange]);
+    const id = name || generateGuid();
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, InputSize.Normal));
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        styleClassName,
+        rounded === true ? "is-rounded" : "",
         "input",
     ]);
     const inputContainerClassName = getClassName([
         "control",
-        props.loading === true ? 'is-loading' : '',
-        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
+        loading === true ? "is-loading" : "",
     ]);
-    const label = props.label;
-    const defaultValue = props.defaultValue?.toISOString().split("T")[0];
+    const stingifiedDefValue = defaultValue?.toISOString().split("T")[0];
     const labelClassName = getClassName([
         "label",
-        label.horizontal !== true ? size : "",
+        !label.horizontal ? elSizeClassName : "",
         label.className
     ]);
-    if (label.horizontal === true) {
+    if (label.horizontal) {
         const labelContainerClassName = getClassName([
             "field-label",
-            size,
+            elSizeClassName,
             label.horizontalContainerClassName
         ]);
         const fieldContainerClassName = getClassName([
             "field-body",
             label.horizontalFieldContainerClassName
         ]);
-        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: className, readOnly: props.readonly, disabled: props.disabled, defaultValue: defaultValue, onChange: onValueChange, onBlur: props.onBlur, name: id, id: id }) }) }) })] }));
+        return (_jsxs("div", { className: "field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: elClassName, readOnly: readonly, disabled: disabled, defaultValue: stingifiedDefValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
+                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
     }
-    return (_jsxs("div", { className: "app-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: className, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue?.toLocaleDateString(), onChange: onValueChange, onBlur: props.onBlur, name: id, id: id }) })] }));
+    return (_jsxs("div", { className: "field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: elClassName, readOnly: readonly, disabled: disabled, defaultValue: stingifiedDefValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
 };
 export default DatePicker;

package/components/primitives/multiline/components/multilineWithLabel/index.d.ts

@@ -1,5 +1,5 @@
-import { MultilineProps } from '../..';
+import { MultilineProps } from "../..";
 /** Multiline textual input component with describing label */
-declare const MultilineWithLabel: (props: MultilineProps) => JSX.Element;
+declare const MultilineWithLabel: ({ defaultValue, onValueChange, validationState, readonly, disabled, name, className, size, style, rounded, loading, label, placeholder, fixed, rows, onBlur }: MultilineProps) => JSX.Element;
 export default MultilineWithLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/multiline/components/multilineWithLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/multilineWithLabel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,UAAW,cAAc,KAAG,WAqGnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/multilineWithLabel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,kKAOrB,cAAc,KAAG,WAyGnB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/multiline/components/multilineWithLabel/index.js

@@ -1,43 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { generateGuid, getClassName } from '@bodynarf/utils';
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+import { InputSize } from "../../../types";
+import { getValidationValues } from "../../../../../utils";
 /** Multiline textual input component with describing label */
-const MultilineWithLabel = (props) => {
-    const onValueChange = useCallback((event) => props.onValueChange(event.target.value), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.onValueChange]);
-    const id = props.name || generateGuid();
-    const size = `is-${(props.size || 'normal')}`;
-    const className = getClassName([
-        props.className,
-        size,
-        props.rounded === true ? 'is-rounded' : '',
+const MultilineWithLabel = ({ defaultValue, onValueChange, validationState, readonly, disabled, name, className, size, style, rounded, loading, label, placeholder, fixed, rows, onBlur }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const id = name || generateGuid();
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, InputSize.Normal));
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
         "textarea",
-        props.fixed === true ? 'has-fixed-size' : '',
+        fixed === true ? "has-fixed-size" : "",
     ]);
     const inputContainerClassName = getClassName([
         "control",
-        props.loading === true ? 'is-loading' : '',
-        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
+        loading === true ? "is-loading" : "",
     ]);
-    const label = props.label;
     const labelClassName = getClassName([
         "label",
-        label.horizontal !== true ? size : "",
+        !label.horizontal ? elSizeClassName : "",
         label.className
     ]);
-    if (label.horizontal === true) {
+    if (label.horizontal) {
         const labelContainerClassName = getClassName([
             "field-label",
-            size,
+            elSizeClassName,
             label.horizontalContainerClassName
         ]);
         const fieldContainerClassName = getClassName([
             "field-body",
             label.horizontalFieldContainerClassName
         ]);
-        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: className, placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, onBlur: props.onBlur, name: id, id: id, rows: props.rows }) }) }) })] }));
+        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, rows: rows }) }), isValidationDefined && validationMessages.length > 0 &&
+                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
     }
-    return (_jsxs("div", { className: "app-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: className, placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, onBlur: props.onBlur, name: id, id: id, rows: props.rows }) })] }));
+    return (_jsxs("div", { className: "app-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, rows: rows }) }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
 };
 export default MultilineWithLabel;

package/components/primitives/multiline/components/multilineWithoutLabel/index.d.ts

@@ -1,5 +1,5 @@
-import { MultilineProps } from '../..';
+import { MultilineProps } from "../..";
 /** Multiline textual input component without describing label*/
-declare const MultilineWithoutLabel: (props: MultilineProps) => JSX.Element;
+declare const MultilineWithoutLabel: ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, className, size, style, rounded, loading, fixed, rows, }: MultilineProps) => JSX.Element;
 export default MultilineWithoutLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/multiline/components/multilineWithoutLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/multilineWithoutLabel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,gEAAgE;AAChE,QAAA,MAAM,qBAAqB,UAAW,cAAc,KAAG,WAyCtD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/multilineWithoutLabel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,gEAAgE;AAChE,QAAA,MAAM,qBAAqB,wIAMxB,cAAc,KAAG,WA0CnB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/components/primitives/multiline/components/multilineWithoutLabel/index.js

@@ -1,25 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { generateGuid, getClassName } from '@bodynarf/utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+import { InputSize } from "../../../types";
+import { getValidationValues } from "../../../../../utils";
 /** Multiline textual input component without describing label*/
-const MultilineWithoutLabel = (props) => {
-    const onValueChange = useCallback((event) => props.onValueChange(event.target.value), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.onValueChange]);
-    const id = props.name || generateGuid();
-    const size = `is-${(props.size || 'normal')}`;
-    const className = getClassName([
-        props.className,
-        size,
-        props.rounded === true ? 'is-rounded' : '',
+const MultilineWithoutLabel = ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, className, size, style, rounded, loading, fixed, rows, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const id = name || generateGuid();
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elClassName = getClassName([
+        className,
+        "is-{0}".format(getValueOrDefault(size, InputSize.Normal)),
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
         "textarea",
-        props.fixed === true ? 'has-fixed-size' : '',
+        fixed === true ? "has-fixed-size" : "",
     ]);
     const inputContainerClassName = getClassName([
         "control",
-        props.loading === true ? 'is-loading' : '',
-        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
+        loading === true ? "is-loading" : "",
     ]);
-    return (_jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: className, placeholder: props.placeholder, defaultValue: props.defaultValue, onChange: onValueChange, onBlur: props.onBlur, id: id, name: id, rows: props.rows }) }) }));
+    return (_jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: elClassName, placeholder: placeholder, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, id: id, name: id, rows: rows }) }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
 };
 export default MultilineWithoutLabel;

package/components/primitives/multiline/index.d.ts

@@ -1,4 +1,5 @@
-import { BaseInputElementProps } from '../types';
+import "../../../common.scss";
+import { BaseInputElementProps } from "../types";
 /** Multiline textual input conponent props type */
 export declare type MultilineProps = BaseInputElementProps<string> & {
     /** Is input should be resizable */

package/components/primitives/multiline/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/multiline/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKjD,mDAAmD;AACnD,oBAAY,cAAc,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACzD,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,wCAAwC;AACxC,QAAA,MAAM,SAAS,UAAW,cAAc,KAAG,WAQ1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/multiline/index.tsx"],"names":[],"mappings":"AAEA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKjD,mDAAmD;AACnD,oBAAY,cAAc,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACzD,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,wCAAwC;AACxC,QAAA,MAAM,SAAS,UAAW,cAAc,KAAG,WAQ1C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/primitives/multiline/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isNullOrUndefined } from '@bodynarf/utils';
-import MultilineWithoutLabel from './components/multilineWithoutLabel';
-import MultilineWithLabel from './components/multilineWithLabel';
+import { isNullOrUndefined } from "@bodynarf/utils";
+import "../../../common.scss";
+import MultilineWithoutLabel from "./components/multilineWithoutLabel";
+import MultilineWithLabel from "./components/multilineWithLabel";
 /** Multiline textual input component */
 const Multiline = (props) => {
     if (isNullOrUndefined(props.label)) {

package/components/primitives/text/components/textWithLabel/index.d.ts

@@ -1,5 +1,5 @@
-import { TextProps } from '../..';
+import { TextProps } from "../..";
 /** Textual input with describing label */
-declare const TextWithLabel: (props: TextProps) => JSX.Element;
+declare const TextWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }: TextProps) => JSX.Element;
 export default TextWithLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/text/components/textWithLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithLabel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,UAAW,SAAS,KAAG,WAoGzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithLabel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,sJAMhB,SAAS,KAAG,WAwGd,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/primitives/text/components/textWithLabel/index.js

@@ -1,42 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { generateGuid, getClassName, } from '@bodynarf/utils';
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault, } from "@bodynarf/utils";
+import { InputSize } from "../../../types";
+import { getValidationValues } from "../../../../../utils";
 /** Textual input with describing label */
-const TextWithLabel = (props) => {
-    const onValueChange = useCallback((event) => props.onValueChange(event.target.value), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.onValueChange]);
-    const id = props.name || generateGuid();
-    const size = `is-${(props.size || 'normal')}`;
-    const className = getClassName([
-        props.className,
-        size,
-        props.rounded === true ? 'is-rounded' : '',
+const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const id = name || generateGuid();
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, InputSize.Normal));
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
         "input",
     ]);
     const inputContainerClassName = getClassName([
         "control",
-        props.loading === true ? 'is-loading' : '',
-        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
+        loading === true ? "is-loading" : "",
     ]);
-    const label = props.label;
     const labelClassName = getClassName([
         "label",
-        label.horizontal !== true ? size : "",
+        !label.horizontal ? elSizeClassName : "",
         label.className
     ]);
-    if (label.horizontal === true) {
+    if (label.horizontal) {
         const labelContainerClassName = getClassName([
             "field-label",
-            size,
+            elSizeClassName,
             label.horizontalContainerClassName
         ]);
         const fieldContainerClassName = getClassName([
             "field-body",
             label.horizontalFieldContainerClassName
         ]);
-        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", className: className, placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, onBlur: props.onBlur, name: id, id: id }) }) }) })] }));
+        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
+                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
     }
-    return (_jsxs("div", { className: "app-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", className: className, placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, onBlur: props.onBlur, name: id, id: id }) })] }));
+    return (_jsxs("div", { className: "field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
 };
 export default TextWithLabel;

package/components/primitives/text/components/textWithoutLabel/index.d.ts

@@ -1,5 +1,5 @@
-import { TextProps } from '../..';
+import { TextProps } from "../..";
 /** Textual input without describing label */
-declare const TextWithoutLabel: (props: TextProps) => JSX.Element;
+declare const TextWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }: TextProps) => JSX.Element;
 export default TextWithoutLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/text/components/textWithoutLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithoutLabel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,UAAW,SAAS,KAAG,WAuC5C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithoutLabel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,+IAMnB,SAAS,KAAG,WA6Cd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/components/primitives/text/components/textWithoutLabel/index.js

@@ -1,24 +1,27 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { generateGuid, getClassName } from '@bodynarf/utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+import { InputSize } from "../../../types";
+import { getValidationValues } from "../../../../../utils";
 /** Textual input without describing label */
-const TextWithoutLabel = (props) => {
-    const onValueChange = useCallback((event) => props.onValueChange(event.target.value), 
+const TextWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.onValueChange]);
-    const className = getClassName([
-        props.className,
-        `is-${(props.size || 'normal')}`,
-        props.rounded === true ? 'is-rounded' : '',
+    [onValueChange]);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elClassName = getClassName([
+        className,
+        "is-{0}".format(getValueOrDefault(size, InputSize.Normal)),
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
         "input",
     ]);
     const containerClassName = getClassName([
-        "app-input",
         "control",
-        props.loading === true ? 'is-loading' : '',
-        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
+        loading === true ? "is-loading" : "",
     ]);
-    const id = props.name || generateGuid();
-    return (_jsx("div", { className: containerClassName, children: _jsx("input", { className: className, type: "text", placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, onBlur: props.onBlur, name: id, id: id }) }));
+    const id = name || generateGuid();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { className: elClassName, type: "text", placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
 };
 export default TextWithoutLabel;

package/components/primitives/text/index.d.ts

@@ -1,4 +1,5 @@
-import { BaseInputElementProps } from '../types';
+import "../../../common.scss";
+import { BaseInputElementProps } from "../types";
 /** Text input conponent props type */
 export declare type TextProps = BaseInputElementProps<string> & {
     /** Focus out event handler */

package/components/primitives/text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKjD,sCAAsC;AACtC,oBAAY,SAAS,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACpD,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,8BAA8B;AAC9B,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,WAOhC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/index.tsx"],"names":[],"mappings":"AAEA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKjD,sCAAsC;AACtC,oBAAY,SAAS,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACpD,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,8BAA8B;AAC9B,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,WAOhC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/primitives/text/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isNullOrUndefined } from '@bodynarf/utils';
-import TextWithLabel from './components/textWithLabel';
-import TextWithoutLabel from './components/textWithoutLabel';
+import { isNullOrUndefined } from "@bodynarf/utils";
+import "../../../common.scss";
+import TextWithLabel from "./components/textWithLabel";
+import TextWithoutLabel from "./components/textWithoutLabel";
 /** Textual input component */
 const Text = (props) => {
     if (isNullOrUndefined(props.label)) {

package/components/primitives/types/baseProps.d.ts

@@ -0,0 +1,30 @@
+import { InputColor, InputLabel, InputSize, ValidationState } from ".";
+import { BaseElementProps } from "../../types";
+/** Base properties for input components */
+export declare type BaseInputElementProps<TValue> = BaseElementProps & {
+    /** Value change handler. Changed value must be stored outside of component */
+    onValueChange: (value: TValue) => void;
+    /** Default value of input component*/
+    defaultValue?: TValue;
+    /** Input element placeholder */
+    placeholder?: string;
+    /** Is component borders are rounded */
+    rounded?: boolean;
+    /** Should be component disabled. Selecting is not allowed */
+    disabled?: boolean;
+    /** Should be component int read only mode. Selecting is allowed */
+    readonly?: boolean;
+    /** Component size */
+    size?: InputSize;
+    /** Label configuration */
+    label?: InputLabel;
+    /** Displaying loading state of component as spinner in right end of component */
+    loading?: boolean;
+    /** Style. Colors the border */
+    style?: InputColor;
+    /** Name of element. Required for form elements */
+    name?: string;
+    /** Current validation state */
+    validationState?: ValidationState;
+};
+//# sourceMappingURL=baseProps.d.ts.map

package/components/primitives/types/baseProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"baseProps.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/types/baseProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,GAAG,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,2CAA2C;AAC3C,oBAAY,qBAAqB,CAAC,MAAM,IAAI,gBAAgB,GAAG;IAC3D,8EAA8E;IAC9E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC,CAAC"}

package/components/primitives/types/enums.d.ts

@@ -0,0 +1,29 @@
+/** Input component size variety */
+export declare enum InputSize {
+    /** Font size is 0.75rem */
+    Small = "small",
+    /** Font size is 1rem */
+    Normal = "normal",
+    /** Font size is 1.25rem */
+    Medium = "medium",
+    /** Font size is 1.5rem */
+    Large = "large"
+}
+/** Input component border-color type */
+export declare enum InputColor {
+    /** color: transparent */
+    Default = "default",
+    /** color: seawave green */
+    Primary = "primary",
+    /** color: blue-violet */
+    Link = "link",
+    /** color: sky-blue */
+    Info = "info",
+    /** color: green */
+    Success = "success",
+    /** color: yellow */
+    Warning = "warning",
+    /** color: red */
+    Danger = "danger"
+}
+//# sourceMappingURL=enums.d.ts.map

package/components/primitives/types/enums.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enums.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/types/enums.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,oBAAY,SAAS;IACjB,2BAA2B;IAC3B,KAAK,UAAU;IAEf,wBAAwB;IACxB,MAAM,WAAW;IAEjB,2BAA2B;IAC3B,MAAM,WAAW;IAEjB,0BAA0B;IAC1B,KAAK,UAAU;CAClB;AAED,wCAAwC;AACxC,oBAAY,UAAU;IAClB,yBAAyB;IACzB,OAAO,YAAY;IAEnB,2BAA2B;IAC3B,OAAO,YAAY;IAEnB,yBAAyB;IACzB,IAAI,SAAS;IAEb,sBAAsB;IACtB,IAAI,SAAS;IAEb,mBAAmB;IACnB,OAAO,YAAY;IAEnB,oBAAoB;IACpB,OAAO,YAAY;IAEnB,iBAAiB;IACjB,MAAM,WAAW;CACpB"}

package/components/primitives/types/enums.js

@@ -0,0 +1,31 @@
+/** Input component size variety */
+export var InputSize;
+(function (InputSize) {
+    /** Font size is 0.75rem */
+    InputSize["Small"] = "small";
+    /** Font size is 1rem */
+    InputSize["Normal"] = "normal";
+    /** Font size is 1.25rem */
+    InputSize["Medium"] = "medium";
+    /** Font size is 1.5rem */
+    InputSize["Large"] = "large";
+})(InputSize || (InputSize = {}));
+/** Input component border-color type */
+export var InputColor;
+(function (InputColor) {
+    /** color: transparent */
+    InputColor["Default"] = "default";
+    /** color: seawave green */
+    InputColor["Primary"] = "primary";
+    /** color: blue-violet */
+    InputColor["Link"] = "link";
+    /** color: sky-blue */
+    InputColor["Info"] = "info";
+    /** color: green */
+    InputColor["Success"] = "success";
+    /** color: yellow */
+    InputColor["Warning"] = "warning";
+    /** color: red */
+    InputColor["Danger"] = "danger";
+})(InputColor || (InputColor = {}));
+;

package/components/primitives/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './baseProps';
+export * from './label';
+export * from './enums';
+export * from './validation';
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/components/primitives/types/index.js

@@ -0,0 +1,4 @@
+export * from './baseProps';
+export * from './label';
+export * from './enums';
+export * from './validation';

package/components/primitives/types/label.d.ts

@@ -0,0 +1,14 @@
+/** Input label configuration */
+export declare type InputLabel = {
+    /** Label textual content to describe input requirements */
+    caption: string;
+    /** Should component be on same line with label */
+    horizontal: boolean;
+    /** Additional class names */
+    className?: string;
+    /** Class name for label parent container in horizontal mode */
+    horizontalContainerClassName?: string;
+    /** Class name for input parent container in horizontal mode */
+    horizontalFieldContainerClassName?: string;
+};
+//# sourceMappingURL=label.d.ts.map

package/components/primitives/types/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/types/label.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,oBAAY,UAAU,GAAG;IACrB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,UAAU,EAAE,OAAO,CAAC;IAEpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+DAA+D;IAC/D,4BAA4B,CAAC,EAAE,MAAM,CAAC;IAEtC,+DAA+D;IAC/D,iCAAiC,CAAC,EAAE,MAAM,CAAC;CAC9C,CAAC"}

package/components/primitives/types/label.js

@@ -0,0 +1 @@
+export {};

package/components/primitives/types/validation/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./status";
+export * from "./state";
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/types/validation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/types/validation/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/components/primitives/types/validation/index.js

@@ -0,0 +1,2 @@
+export * from "./status";
+export * from "./state";

package/components/primitives/types/validation/state.d.ts

@@ -0,0 +1,9 @@
+import { ValidationStatus } from "./status";
+/** Form component value validation state */
+export interface ValidationState {
+    /** Current status */
+    status: ValidationStatus;
+    /** Current status messages */
+    messages: Array<string>;
+}
+//# sourceMappingURL=state.d.ts.map

package/components/primitives/types/validation/state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/types/validation/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,4CAA4C;AAC5C,MAAM,WAAW,eAAe;IAC5B,qBAAqB;IACrB,MAAM,EAAE,gBAAgB,CAAC;IAEzB,8BAA8B;IAC9B,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAC3B"}

package/components/primitives/types/validation/state.js

@@ -0,0 +1,2 @@
+;
+export {};

package/components/primitives/types/validation/status.d.ts

@@ -0,0 +1,10 @@
+/** Input component value validation status */
+export declare enum ValidationStatus {
+    /** Validation wasn"t been performed */
+    None = "none",
+    /** Value is valid */
+    Valid = "valid",
+    /** Value is invalid due some validator check */
+    Invalid = "invalid"
+}
+//# sourceMappingURL=status.d.ts.map

package/components/primitives/types/validation/status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/types/validation/status.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,oBAAY,gBAAgB;IACxB,uCAAuC;IACvC,IAAI,SAAS;IAEb,qBAAqB;IACrB,KAAK,UAAU;IAEf,gDAAgD;IAChD,OAAO,YAAY;CACtB"}

package/components/primitives/types/validation/status.js

@@ -0,0 +1,11 @@
+/** Input component value validation status */
+export var ValidationStatus;
+(function (ValidationStatus) {
+    /** Validation wasn"t been performed */
+    ValidationStatus["None"] = "none";
+    /** Value is valid */
+    ValidationStatus["Valid"] = "valid";
+    /** Value is invalid due some validator check */
+    ValidationStatus["Invalid"] = "invalid";
+})(ValidationStatus || (ValidationStatus = {}));
+;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.3.11",
+    "version": "1.4.1",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -30,7 +30,7 @@
         "typescript": "^4.7.3"
     },
     "dependencies": {
-        "@bodynarf/utils": "^1.0.10",
+        "@bodynarf/utils": "^1.0.14",
         "bulma": "^0.9.4",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"

package/utils/formValidation.d.ts

@@ -0,0 +1,16 @@
+import { InputColor, ValidationState } from "../components/primitives";
+/**
+ * Get current validation state values
+ * @param style Component style color
+ * @param validationState Current form item validation state
+ * @returns [Is validation applicable; classname attribute value; validation messages]
+ */
+export declare const getValidationValues: (style?: InputColor, validationState?: ValidationState) => [boolean, string, Array<string>];
+/**
+ * Get classname attribute value based on current validation state and form item component style prop
+ * @param style Component style color
+ * @param validationState Current form item validation state
+ * @returns Classname attribute value
+ */
+export declare const getStyleClassName: (style?: InputColor, validationState?: ValidationState) => string;
+//# sourceMappingURL=formValidation.d.ts.map

package/utils/formValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formValidation.d.ts","sourceRoot":"","sources":["../../src/utils/formValidation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAoB,MAAM,0BAA0B,CAAC;AAEzF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,WAAY,UAAU,oBAAoB,eAAe,KAAG,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC,CAO1H,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,WAAY,UAAU,oBAAoB,eAAe,KAAG,MAgBzF,CAAC"}

package/utils/formValidation.js

@@ -0,0 +1,35 @@
+import { isNullOrUndefined } from "@bodynarf/utils";
+import { ValidationStatus } from "../components/primitives";
+/**
+ * Get current validation state values
+ * @param style Component style color
+ * @param validationState Current form item validation state
+ * @returns [Is validation applicable; classname attribute value; validation messages]
+ */
+export const getValidationValues = (style, validationState) => {
+    const validationStateDefined = !isNullOrUndefined(validationState) && validationState.status !== ValidationStatus.None;
+    const styleClassName = getStyleClassName(style, validationState);
+    const messages = validationState?.messages ?? [];
+    return [validationStateDefined, styleClassName, messages];
+};
+/**
+ * Get classname attribute value based on current validation state and form item component style prop
+ * @param style Component style color
+ * @param validationState Current form item validation state
+ * @returns Classname attribute value
+ */
+export const getStyleClassName = (style, validationState) => {
+    if (isNullOrUndefined(validationState)) {
+        return isNullOrUndefined(style) ? "" : `is-${style}`;
+    }
+    const { status } = validationState;
+    switch (status) {
+        case ValidationStatus.Valid: {
+            return "is-success";
+        }
+        case ValidationStatus.Invalid: {
+            return "is-danger";
+        }
+    }
+    return isNullOrUndefined(style) ? "" : `is-${style}`;
+};

package/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './formValidation';
+//# sourceMappingURL=index.d.ts.map

package/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/utils/index.js

@@ -0,0 +1 @@
+export * from './formValidation';

package/components/primitives/index.d.ts

@@ -1,6 +0,0 @@
-export * from './date';
-export * from './multiline';
-export * from './text';
-export * from './checkbox';
-export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/components/primitives/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/components/primitives/index.js

@@ -1,5 +0,0 @@
-export * from './date';
-export * from './multiline';
-export * from './text';
-export * from './checkbox';
-export * from './types';

package/components/primitives/types.d.ts

@@ -1,44 +0,0 @@
-import { BaseElementProps } from "../types";
-/** Base properties for input components */
-export declare type BaseInputElementProps<TValue> = BaseElementProps & {
-    /** Value change handler. Changed value must be stored outside of component */
-    onValueChange: (value: TValue) => void;
-    /** Default value of input component*/
-    defaultValue?: TValue;
-    /** Input element placeholder */
-    placeholder?: string;
-    /** Is component borders are rounded */
-    rounded?: boolean;
-    /** Should be component disabled. Selecting is not allowed */
-    disabled?: boolean;
-    /** Should be component int read only mode. Selecting is allowed */
-    readonly?: boolean;
-    /** Component size */
-    size?: InputSize;
-    /** Label configuration */
-    label?: InputLabel;
-    /** Displaying loading state of component as spinner in right end of component */
-    loading?: boolean;
-    /** Style. Colors the border */
-    style?: InputColor;
-    /** Name of element. Required for form elements */
-    name?: string;
-};
-/** Input label configuration */
-export declare type InputLabel = {
-    /** Label textual content to describe input requirements */
-    caption: string;
-    /** Should component be on same line with label */
-    horizontal?: boolean;
-    /** Additional class names */
-    className?: string;
-    /** Class name for label parent container in horizontal mode */
-    horizontalContainerClassName?: string;
-    /** Class name for input parent container in horizontal mode */
-    horizontalFieldContainerClassName?: string;
-};
-/** Input component size variety */
-export declare type InputSize = 'small' | 'normal' | 'medium' | 'large';
-/** Input component border-color type */
-export declare type InputColor = 'default' /** color: transparent */ | 'primary' /** color: seawave green */ | 'link' /** color: blue-violet */ | 'info' /** color: sky-blue */ | 'success' /** color: green */ | 'warning' /** color: yellow */ | 'danger' /** color: red */;
-//# sourceMappingURL=types.d.ts.map

package/components/primitives/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,2CAA2C;AAC3C,oBAAY,qBAAqB,CAAC,MAAM,IAAI,gBAAgB,GAAG;IAC3D,8EAA8E;IAC9E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,gCAAgC;AAChC,oBAAY,UAAU,GAAG;IACrB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+DAA+D;IAC/D,4BAA4B,CAAC,EAAE,MAAM,CAAC;IAEtC,+DAA+D;IAC/D,iCAAiC,CAAC,EAAE,MAAM,CAAC;CAC9C,CAAC;AAEF,mCAAmC;AACnC,oBAAY,SAAS,GACf,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,OAAO,CACR;AAEL,wCAAwC;AACxC,oBAAY,UAAU,GAChB,SAAS,CAAC,yBAAyB,GACnC,SAAS,CAAC,2BAA2B,GACrC,MAAM,CAAC,yBAAyB,GAChC,MAAM,CAAC,sBAAsB,GAC7B,SAAS,CAAC,mBAAmB,GAC7B,SAAS,CAAC,oBAAoB,GAC9B,QAAQ,CAAC,iBAAiB,CAC3B"}