@bodynarf/react.components 1.8.22 → 1.9.0

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

@@ -1,14 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isNullOrUndefined } from "@bodynarf/utils";
-import NumberWithLabel from "../../number/components/withLabel";
-import NumberWithoutLabel from "../../number/components/withoutLabel";
+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 }));
-    }
+    return isNullOrUndefined(props.label)
+        ? _jsx(NumberWithoutLabel, { ...props })
+        : _jsx(NumberWithLabel, { ...props });
 };
 export default Number;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,kCAAkC;AAClC,QAAA,MAAM,eAAe,4JAOlB,WAAW,KAAG,WA2GhB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,kCAAkC;AAClC,QAAA,MAAM,eAAe,+KAUlB,WAAW,KAAG,WA0DhB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1,44 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { generateGuid, getClassName, getValueOrDefault, isStringEmpty } from "@bodynarf/utils";
-import { ElementSize } from "../../../..";
-import { getValidationValues } from "../../../../../utils";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined, isStringEmpty } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import ComponentWithLabel from "../../../internal/componentWithLabel";
+import InternalHint from "../../../internal/hint";
 /** Number component with label */
-const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded = false, loading = false, label, placeholder, onBlur, step = 1, }) => {
+const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded = false, loading = false, label, placeholder, onBlur, step = 1, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value) ? undefined : +event.target.value), [onValueChange]);
-    const id = name || generateGuid();
+    const id = name ?? generateGuid();
     const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
-    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
     const elClassName = getClassName([
         className,
         elSizeClassName,
         rounded ? "is-rounded" : "",
-        styleClassName,
+        getStyleClassName(style, validationState),
         "input",
     ]);
     const inputContainerClassName = getClassName([
         "control",
         loading ? "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: "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: [_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, step: step }) }), isValidationDefined && validationMessages.length > 0 &&
-                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
-    }
-    return (_jsxs("div", { className: "bbr-input 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, step: step }) }), isValidationDefined && validationMessages.length > 0 &&
-                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs(ComponentWithLabel, { id: id, label: label, size: getValueOrDefault(size, ElementSize.Normal), children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", id: id, name: id, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default NumberWithLabel;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,qJAOrB,WAAW,KAAG,WA8ChB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,wKAUrB,WAAW,KAAG,WAqDhB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -1,17 +1,17 @@
 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 { ElementSize } from "../../../..";
-import { getValidationValues } from "../../../../../utils";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import InternalHint from "../../../internal/hint";
 /** Number component without label */
-const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded = false, loading = false, placeholder, onBlur, step = 1, }) => {
+const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded = false, loading = false, placeholder, onBlur, step = 1, className, title, data, hint, }) => {
     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, ElementSize.Normal)),
         rounded ? "is-rounded" : "",
-        styleClassName,
+        getStyleClassName(style, validationState),
         "input",
     ]);
     const containerClassName = getClassName([
@@ -19,8 +19,10 @@ const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, v
         "bbr-input",
         loading ? "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, step: step }) }), isValidationDefined && validationMessages.length > 0 &&
-                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+    const id = name ?? generateGuid();
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "number", id: id, name: id, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default NumberWithoutLabel;

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

@@ -1,4 +1,4 @@
-import { BaseInputElementProps } from "../..";
+import { BaseInputElementProps } from "../../../types";
 /** Number component props type */
 export interface NumberProps extends BaseInputElementProps<number> {
     /** Focus out event handler */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/number/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IAC9D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;MAIE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/number/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnD,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IAC9D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;MAIE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB"}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./style.scss";
-import { PasswordProps } from "../../password";
+import { PasswordProps } from "../..";
 /** Password input component */
 declare const Password: (props: PasswordProps) => JSX.Element;
 export default Password;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/password/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAKzD,+BAA+B;AAC/B,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/password/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,+BAA+B;AAC/B,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAIxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isNullOrUndefined } from "@bodynarf/utils";
 import "./style.scss";
-import PasswordWithLabel from "../../password/components/withLabel";
-import PasswordWithoutLabel from "../../password/components/withoutLabel";
+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 });
+    return isNullOrUndefined(props.label)
+        ? _jsx(PasswordWithoutLabel, { ...props })
+        : _jsx(PasswordWithLabel, { ...props });
 };
 export default Password;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,QAAA,MAAM,iBAAiB,uIAOpB,aAAa,KAAG,WAgIlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,iBAAiB,0JAUpB,aAAa,KAAG,WAwElB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -1,22 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
-import { getValidationValues } from "../../../../../utils";
-import { ElementSize } from "../../../..";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import Icon from "../../../../icon";
-const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded = false, loading = false, label, placeholder, canShowPassword = false, }) => {
+import ComponentWithLabel from "../../../internal/componentWithLabel";
+import InternalHint from "../../../internal/hint";
+const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, size, style, rounded = false, loading = false, label, placeholder, canShowPassword = false, className, title, data, hint, }) => {
     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, ElementSize.Normal));
-    const id = name || generateGuid();
+    const id = name ?? generateGuid();
     const elClassName = getClassName([
+        "bbr-password",
         className,
         elSizeClassName,
         rounded ? "is-rounded" : "",
-        styleClassName,
-        "bbr-password",
+        getStyleClassName(style, validationState),
         "input",
     ]);
     const inputContainerClassName = getClassName([
@@ -25,27 +26,10 @@ const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, cla
         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", size: ElementSize.Medium }) })] }), isValidationDefined && validationMessages.length > 0 &&
-                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
-    }
-    return (_jsxs("div", { className: "bbr-input 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", size: ElementSize.Medium }) })] }), isValidationDefined && validationMessages.length > 0 &&
-                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs(ComponentWithLabel, { id: id, label: label, size: getValueOrDefault(size, ElementSize.Normal), children: [_jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: id, name: id, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, title: title, ...dataAttributes }), canShowPassword && !loading &&
+                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, title: "Show password", children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default PasswordWithLabel;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PasswordProps } from "../../../password";
-declare const PasswordWithoutLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
+import { PasswordProps } from "../..";
+declare const PasswordWithoutLabel: ({ onValueChange, disabled, validationState, name, size, style, rounded, loading, placeholder, canShowPassword, className, title, data, hint, }: PasswordProps) => JSX.Element;
 export default PasswordWithoutLabel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,QAAA,MAAM,oBAAoB,gIAOvB,aAAa,KAAG,WA4DlB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"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,mJAUvB,aAAa,KAAG,WAoElB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -1,22 +1,22 @@
 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 { ElementSize } from "../../../..";
-import { getValidationValues } from "../../../../../utils";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import Icon from "../../../../icon";
-const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded = false, loading = false, placeholder, canShowPassword = false, }) => {
+import InternalHint from "../../../internal/hint";
+const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, size, style, rounded = false, loading = false, placeholder, canShowPassword = false, className, title, data, hint, }) => {
     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, ElementSize.Normal));
-    const id = name || generateGuid();
+    const id = name ?? generateGuid();
     const elClassName = getClassName([
+        "bbr-password",
         className,
         elSizeClassName,
         rounded ? "is-rounded" : "",
-        styleClassName,
-        "bbr-password",
+        getStyleClassName(style, validationState),
         "input",
     ]);
     const containerClassName = getClassName([
@@ -26,8 +26,10 @@ const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name,
         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", size: ElementSize.Medium }) })] }), isValidationDefined && validationMessages.length > 0 &&
-                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: id, name: id, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, title: title, ...dataAttributes }), canShowPassword && !loading &&
+                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default PasswordWithoutLabel;

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

@@ -1,4 +1,4 @@
-import { BaseInputElementProps } from "../..";
+import { BaseInputElementProps } from "../../../types";
 /** Password component props type */
 export interface PasswordProps extends Omit<BaseInputElementProps<string>, "defaultValue" | "readonly"> {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/password/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACnG;;;MAGE;IACF,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/password/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACnG;;;MAGE;IACF,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B"}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "../../../../common.scss";
-import { TextProps } from "../../..";
+import { TextProps } from "..";
 /** Textual input component */
 declare const Text: (props: TextProps) => JSX.Element;
 export default Text;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/text/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,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/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAI/B,8BAA8B;AAC9B,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,WAIhC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -1,15 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isNullOrUndefined } from "@bodynarf/utils";
 import "../../../../common.scss";
-import TextWithLabel from "../../text/components/textWithLabel";
-import TextWithoutLabel from "../../text/components/textWithoutLabel";
+import TextWithLabel from "../components/withLabel";
+import TextWithoutLabel from "../components/withoutLabel";
 /** Textual input component */
 const Text = (props) => {
-    if (isNullOrUndefined(props.label)) {
-        return (_jsx(TextWithoutLabel, { ...props }));
-    }
-    else {
-        return (_jsx(TextWithLabel, { ...props }));
-    }
+    return isNullOrUndefined(props.label)
+        ? _jsx(TextWithoutLabel, { ...props })
+        : _jsx(TextWithLabel, { ...props });
 };
 export default Text;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,yKAUhB,SAAS,KAAG,WAwDd,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined, } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import InternalHint from "../../../internal/hint";
+import ComponentWithLabel from "../../../internal/componentWithLabel";
+/** Textual input with describing label */
+const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded = false, loading = false, label, placeholder, onBlur, className, title, data, hint, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const id = name ?? generateGuid();
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded ? "is-rounded" : "",
+        getStyleClassName(style, validationState),
+        "input",
+    ]);
+    const inputContainerClassName = getClassName([
+        "control",
+        loading ? "is-loading" : "",
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs(ComponentWithLabel, { id: id, label: label, size: getValueOrDefault(size, ElementSize.Normal), children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", id: id, name: id, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+};
+export default TextWithLabel;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,kKAUnB,SAAS,KAAG,WAoDd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import InternalHint from "../../../internal/hint";
+/** Textual input without describing label */
+const TextWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded = false, loading = false, placeholder, onBlur, className, title, data, hint, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const elClassName = getClassName([
+        className,
+        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        rounded ? "is-rounded" : "",
+        getStyleClassName(style, validationState),
+        "input",
+    ]);
+    const containerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading ? "is-loading" : "",
+    ]);
+    const id = name ?? generateGuid();
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "text", id: id, name: id, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+};
+export default TextWithoutLabel;

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

@@ -1,4 +1,4 @@
-import { BaseInputElementProps } from "../..";
+import { BaseInputElementProps } from "../../../types";
 /** Text input component props type */
 export interface TextProps extends BaseInputElementProps<string> {
     /** Focus out event handler */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,sCAAsC;AACtC,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IAC5D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnD,sCAAsC;AACtC,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IAC5D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}

package/components/search/component/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./style.scss";
-import { SearchProps } from "../../search";
+import { SearchProps } from "..";
 /** Search component */
-export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading, rounded, disabled, }: SearchProps): JSX.Element;
+export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading, rounded, disabled, className, title, data, }: SearchProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/components/search/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAItB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAI,EAAE,YAAY,EAClB,IAAI,EACJ,SAAiB,EAAE,OAAe,EAAE,QAAQ,GAC/C,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAyE3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAI,EAAE,YAAY,EAClB,IAAI,EACJ,SAAiB,EAAE,OAAe,EAAE,QAAQ,EAE5C,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAqF3B"}

package/components/search/component/index.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { generateGuid, getClassName } from "@bodynarf/utils";
-import "./style.scss";
+import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../types";
+import { mapDataAttributes } from "../../../utils";
 import Button from "../../button";
+import "./style.scss";
 /** Search component */
-export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading = false, rounded = false, disabled, }) {
-    const [elementName] = useState(name || generateGuid());
-    const [searchValue, setSearchValue] = useState(defaultValue || "");
+export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading = false, rounded = false, disabled, className, title, data, }) {
+    const [elementName] = useState(name ?? generateGuid());
+    const [searchValue, setSearchValue] = useState(defaultValue ?? "");
     const onChange = useCallback((event) => {
         const elementValue = event.target.value;
         if (searchType === "byTyping") {
@@ -15,23 +17,27 @@ export default function Search({ searchType, onSearch, caption, name, defaultVal
         setSearchValue(elementValue);
     }, [onSearch, searchType]);
     const onSearchButtonClick = useCallback(() => onSearch(searchValue), [onSearch, searchValue]);
-    const className = getClassName([
+    const elClassName = getClassName([
         "bbr-search",
         "control",
-        `is-${(size || "normal")}`,
+        className,
+        `is-${(size ?? ElementSize.Normal)}`,
         isLoading ? "is-loading" : "",
         searchType === "byButton" ? "is-expanded" : "",
     ]);
     const inputClassName = getClassName([
         "input",
         "is-unselectable",
-        `is-${(size || "normal")}`,
+        `is-${(size ?? ElementSize.Normal)}`,
         rounded ? "is-rounded" : "",
     ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
     if (searchType === "byButton") {
-        return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: className, children: _jsx("input", { type: "search", name: elementName, defaultValue: searchValue, className: inputClassName, disabled: disabled, onChange: onChange, placeholder: caption }) }), _jsx("div", { className: "control", children: _jsx(Button, { caption: "Search", type: "info", onClick: onSearchButtonClick, isLoading: isLoading, size: size }) })] }));
+        return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", name: elementName, disabled: disabled, onChange: onChange, placeholder: caption, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }), _jsx("div", { className: "control", children: _jsx(Button, { type: "info", size: size, caption: "Search", disabled: disabled, isLoading: isLoading, onClick: onSearchButtonClick }) })] }));
     }
     else {
-        return (_jsx("div", { className: className, children: _jsx("input", { type: "search", name: elementName, defaultValue: searchValue, className: inputClassName, disabled: disabled, onChange: onChange, placeholder: caption }) }));
+        return (_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", name: elementName, disabled: disabled, onChange: onChange, placeholder: caption, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }));
     }
 }

package/components/search/types.d.ts

@@ -1,6 +1,6 @@
-import { ElementSize } from "..";
+import { BaseElementProps, ElementSize } from "../../types";
 /** Search component props type */
-export interface SearchProps {
+export interface SearchProps extends BaseElementProps {
     /**
      * Search type: by typing, starts from minimum characters to search
      * or by clicking on button next to search bar.

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/search/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,kCAAkC;AAClC,MAAM,WAAW,WAAW;IACxB;;;;MAIE;IACF,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IAEpC,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/search/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE3D,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,gBAAgB;IACjD;;;;MAIE;IACF,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IAEpC,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB"}