@bodynarf/react.components 1.4.5 → 1.4.7

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownProps } from "../..";
 declare const DropdownCompact: ({ items, value, onSelect, deselectable, className, hideOnOuterClick, listMaxHeight, placeholder, compact, }: DropdownProps) => JSX.Element;
 export default DropdownCompact;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/compact/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,eAAe,gHAMlB,aAAa,KAAG,WA6FlB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/compact/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,eAAe,gHAMlB,aAAa,KAAG,WA6FlB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownProps } from '../..';
 declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder }: DropdownProps) => JSX.Element;
 export default DropdownWithLabel;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,iBAAiB,8HAOpB,aAAa,KAAG,WA0KlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,iBAAiB,8HAOpB,aAAa,KAAG,WA0KlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/dropdown/index.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIzC,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;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":";AAEA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIzC,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;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,6 +1,6 @@
 import "./checkbox.scss";
 import { BaseInputElementProps } from "../types";
-export declare type CheckBoxProps = BaseInputElementProps<boolean> & {
+export interface CheckBoxProps extends BaseInputElementProps<boolean> {
     /** Is full colored checkbox */
     block?: boolean;
     /** Remove the checkbox border */
@@ -16,7 +16,8 @@ export declare type CheckBoxProps = BaseInputElementProps<boolean> & {
      * @example `{ style: InputColor.Info, hasBackgrounColor: true, fixBackgroundColor: true }` -
     */
     fixBackgroundColor?: boolean;
-};
+}
+/** Boolean input component */
 declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor }: CheckBoxProps) => JSX.Element;
 export default CheckBox;
 //# sourceMappingURL=index.d.ts.map

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;;;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"}
+{"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,MAAM,WAAW,aAAc,SAAQ,qBAAqB,CAAC,OAAO,CAAC;IACjE,+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;AAED,8BAA8B;AAC9B,QAAA,MAAM,QAAQ,+IAKX,aAAa,KAAG,WAsClB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/primitives/checkbox/index.js

@@ -2,6 +2,8 @@ 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";
+;
+/** Boolean input component */
 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();

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "../../../common.scss";
 import { BaseInputElementProps, InputLabel } from "../types";
 /** Date input conponent props type */

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,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"}
+{"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/multiline/components/multilineWithLabel/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MultilineProps } from "../..";
 /** Multiline textual input component with describing label */
 declare const MultilineWithLabel: ({ defaultValue, onValueChange, validationState, readonly, disabled, name, className, size, style, rounded, loading, label, placeholder, fixed, rows, onBlur }: MultilineProps) => JSX.Element;

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":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,kKAOrB,cAAc,KAAG,WAyGnB,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/multilineWithoutLabel/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MultilineProps } from "../..";
 /** Multiline textual input component without describing label*/
 declare const MultilineWithoutLabel: ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, className, size, style, rounded, loading, fixed, rows, }: MultilineProps) => JSX.Element;

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":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,gEAAgE;AAChE,QAAA,MAAM,qBAAqB,wIAMxB,cAAc,KAAG,WA0CnB,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/number/components/withLabel/index.d.ts

@@ -0,0 +1,5 @@
+import { NumberProps } from "../..";
+/** Number component with label */
+declare const NumberWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }: NumberProps) => JSX.Element;
+export default NumberWithLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,kCAAkC;AAClC,QAAA,MAAM,eAAe,sJAMlB,WAAW,KAAG,WAwGhB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/primitives/number/components/withLabel/index.js

@@ -0,0 +1,44 @@
+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 "../../..";
+import { getValidationValues } from "../../../../../utils";
+/** Number component with label */
+const NumberWithLabel = ({ 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",
+        loading === true ? "is-loading" : "",
+    ]);
+    const labelClassName = getClassName([
+        "label",
+        !label.horizontal ? elSizeClassName : "",
+        label.className
+    ]);
+    if (label.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            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: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", 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: "field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", 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 NumberWithLabel;

package/components/primitives/number/components/withoutLabel/index.d.ts

@@ -0,0 +1,5 @@
+import { NumberProps } from "../..";
+/** Number component without label */
+declare const NumberWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }: NumberProps) => JSX.Element;
+export default NumberWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,+IAMrB,WAAW,KAAG,WA4ChB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/number/components/withoutLabel/index.js

@@ -0,0 +1,25 @@
+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 "../../..";
+import { getValidationValues } from "../../../../../utils";
+/** Number component without label */
+const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }) => {
+    const onChange = useCallback((event) => onValueChange(+event.target.value), [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([
+        "control",
+        loading === true ? "is-loading" : "",
+    ]);
+    const id = name || generateGuid();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "number", 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 NumberWithoutLabel;

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

@@ -0,0 +1,10 @@
+import { BaseInputElementProps } from "..";
+/** Number component props type */
+export interface NumberProps extends BaseInputElementProps<number> {
+    /** Focus out event handler */
+    onBlur?: () => void;
+}
+/** Number input component */
+declare const Number: (props: NumberProps) => JSX.Element;
+export default Number;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/number/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,IAAI,CAAC;AAK3C,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IAC9D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,6BAA6B;AAC7B,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,WAOpC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/primitives/number/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrUndefined } from "@bodynarf/utils";
+import NumberWithLabel from "./components/withLabel";
+import NumberWithoutLabel from "./components/withoutLabel";
+/** Number input component */
+const Number = (props) => {
+    if (isNullOrUndefined(props.label)) {
+        return (_jsx(NumberWithoutLabel, { ...props }));
+    }
+    else {
+        return (_jsx(NumberWithLabel, { ...props }));
+    }
+};
+export default Number;

package/components/primitives/password/components/withLabel/index.d.ts

@@ -0,0 +1,4 @@
+import { PasswordProps } from "../..";
+declare const PasswordWithLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, label, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
+export default PasswordWithLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,iBAAiB,uIAMpB,aAAa,KAAG,WA8HlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/primitives/password/components/withLabel/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+import Icon from "../../../../icon";
+import { getValidationValues } from "../../../../../utils";
+import { InputSize } from "../../../";
+const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, label, placeholder, canShowPassword, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const [contentIsHidden, setContentIsHidden] = useState(true);
+    const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, InputSize.Normal));
+    const id = name || generateGuid();
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "bbr-password",
+        "input",
+    ]);
+    const inputContainerClassName = getClassName([
+        "control",
+        loading === true ? "is-loading" : "",
+        canShowPassword ? "has-icons-right" : "",
+        "bbr-password__wrapper",
+    ]);
+    const labelClassName = getClassName([
+        "label",
+        !label.horizontal ? elSizeClassName : "",
+        label.className
+    ]);
+    if (label.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            elSizeClassName,
+            label.horizontalContainerClassName
+        ]);
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label.horizontalFieldContainerClassName
+        ]);
+        return (_jsxs("div", { className: "bbr-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: [_jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", className: elClassName, placeholder: placeholder, disabled: disabled, onChange: onChange, name: id, id: id }), canShowPassword && !loading &&
+                                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, title: "Show password", children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash" }) })] }), isValidationDefined && validationMessages.length > 0 &&
+                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
+    }
+    return (_jsxs("div", { className: "field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", className: elClassName, placeholder: placeholder, disabled: disabled, onChange: onChange, name: id, id: id }), canShowPassword && !loading &&
+                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash" }) })] }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default PasswordWithLabel;

package/components/primitives/password/components/withoutLabel/index.d.ts

@@ -0,0 +1,4 @@
+import { PasswordProps } from "../..";
+declare const PasswordWithoutLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
+export default PasswordWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withoutLabel/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,oBAAoB,gIAMvB,aAAa,KAAG,WA0DlB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/components/primitives/password/components/withoutLabel/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+import Icon from "../../../../icon";
+import { InputSize } from "../../../types";
+import { getValidationValues } from "../../../../../utils";
+const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const [contentIsHidden, setContentIsHidden] = useState(true);
+    const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, InputSize.Normal));
+    const id = name || generateGuid();
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "bbr-password",
+        "input",
+    ]);
+    const containerClassName = getClassName([
+        "control",
+        loading === true ? "is-loading" : "",
+        canShowPassword ? "has-icons-right" : "",
+        "bbr-password__wrapper",
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", className: elClassName, placeholder: placeholder, disabled: disabled, onChange: onChange, name: id, id: id }), canShowPassword && !loading &&
+                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash" }) })] }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default PasswordWithoutLabel;

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

@@ -0,0 +1,14 @@
+import "./style.scss";
+import { BaseInputElementProps } from "../types";
+/** Password component props type */
+export interface PasswordProps extends Omit<BaseInputElementProps<string>, 'defaultValue' | 'readonly'> {
+    /**
+     * Is icon "Show password" visible.
+     * Will show password on click
+    */
+    canShowPassword: boolean;
+}
+/** Password input component */
+declare const Password: (props: PasswordProps) => JSX.Element;
+export default Password;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/password/index.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKjD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACnG;;;MAGE;IACF,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,+BAA+B;AAC/B,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/primitives/password/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrUndefined } from "@bodynarf/utils";
+import "./style.scss";
+import PasswordWithLabel from "./components/withLabel";
+import PasswordWithoutLabel from "./components/withoutLabel";
+/** Password input component */
+const Password = (props) => {
+    if (isNullOrUndefined(props.label)) {
+        return _jsx(PasswordWithoutLabel, { ...props });
+    }
+    return _jsx(PasswordWithLabel, { ...props });
+};
+export default Password;

package/components/primitives/password/style.scss

@@ -0,0 +1,16 @@
+.bbr-password {
+    &:focus ~ .icon:not(:hover) {
+        color: rgb(219, 219, 219) !important;
+    }
+
+    &__wrapper {
+        .icon {
+            pointer-events: inherit !important;
+            cursor: pointer;
+
+            &:hover {
+                color: rgb(74, 74, 74);
+            }
+        }
+    }
+}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TextProps } from "../..";
 /** Textual input with describing label */
 declare const TextWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }: TextProps) => JSX.Element;

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":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,sJAMhB,SAAS,KAAG,WAwGd,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/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":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,+IAMnB,SAAS,KAAG,WA6Cd,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,WA4Cd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -5,9 +5,7 @@ import { InputSize } from "../../../types";
 import { getValidationValues } from "../../../../../utils";
 /** Textual input without describing label */
 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
-    [onValueChange]);
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
     const elClassName = getClassName([
         className,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.4.5",
+    "version": "1.4.7",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"