@bodynarf/react.components 1.8.22 → 1.9.0

package/components/primitives/color/components/picker/index.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getClassName, getFontColorFromString, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementPosition } from "../../../../..";
+import { ElementPosition } from "../../../../../types";
+import { mapDataAttributes } from "../../../../../utils";
+import InternalHint from "../../../internal/hint";
 /** Color picker container component */
-const ColorPickerControl = ({ containerClassName, className, disabled, previewConfig, size, defaultColor, onValueChange, value, id, title, dataAttributes, isValidationDefined, validationMessages, styleClassName, }) => {
+const ColorPickerControl = ({ elementClassName, disabled, previewConfig, size, defaultValue, onValueChange, value, id, title, data, hint, validationState, }) => {
     if (!isNullOrUndefined(previewConfig)) {
-        return _jsx(PickerWithPreview, { containerClassName: containerClassName, className: className, disabled: disabled, size: size, defaultColor: defaultColor, onValueChange: onValueChange, value: value, id: id, title: title, dataAttributes: dataAttributes, previewConfig: previewConfig, isValidationDefined: isValidationDefined, validationMessages: validationMessages, styleClassName: styleClassName });
+        return (_jsx(PickerWithPreview, { id: id, size: size, value: value, disabled: disabled, elementClassName: elementClassName, defaultValue: defaultValue, onValueChange: onValueChange, previewConfig: previewConfig, title: title, data: data }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "color", className: className, disabled: disabled, defaultValue: defaultColor, onChange: onValueChange, name: id, id: id, title: title, ...dataAttributes }) }), isValidationDefined && validationMessages.length > 0 &&
-                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "control bbr-input", children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, className: elementClassName, onChange: onValueChange, defaultValue: defaultValue, title: title, ...data }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default ColorPickerControl;
 /** Picker sub component with preview */
-const PickerWithPreview = ({ containerClassName, className, disabled, size, defaultColor, onValueChange, value, id, title, dataAttributes, previewConfig, isValidationDefined, validationMessages, styleClassName, }) => {
+const PickerWithPreview = ({ elementClassName, disabled, size, defaultValue, onValueChange, value, id, title, data, previewConfig, hint, validationState, }) => {
     const classNames = getClassName([
         "bbr-color-picker__preview",
         "button",
@@ -19,8 +20,12 @@ const PickerWithPreview = ({ containerClassName, className, disabled, size, defa
         isNullOrUndefined(size) ? "" : `is-${size}`
     ]);
     const color = getFontColorFromString(value);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
     const controlContainerClassName = getClassName([
-        containerClassName,
+        "control",
+        "bbr-input",
         "is-flex-grow-1",
         previewConfig.position === ElementPosition.Left ? "ml-1" : "mr-1",
     ]);
@@ -28,12 +33,10 @@ const PickerWithPreview = ({ containerClassName, className, disabled, size, defa
         return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("button", { className: classNames, style: {
                         "--color-picker__background-color": value,
                         "--color-picker__color": color,
-                    }, children: value }), _jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", className: className, disabled: disabled, defaultValue: defaultColor, onChange: onValueChange, name: id, id: id, title: title, ...dataAttributes }) }), isValidationDefined && validationMessages.length > 0 &&
-                    _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+                    }, children: value }), _jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
     }
-    return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", className: className, disabled: disabled, defaultValue: defaultColor, onChange: onValueChange, name: id, id: id, title: title, ...dataAttributes }) }), _jsx("button", { className: classNames, style: {
+    return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx("button", { className: classNames, style: {
                     "--color-picker__background-color": value,
                     "--color-picker__color": color,
-                }, children: value }), isValidationDefined && validationMessages.length > 0 &&
-                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+                }, children: value }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ColorPickerProps } from "../..";
 /** Color picker component with form label */
-declare function ColorPickerWithLabel({ className, title, preview, name, defaultValue, validationState, onValueChange, data, disabled, rounded, size, label, }: ColorPickerProps): JSX.Element;
+declare function ColorPickerWithLabel({ preview, name, defaultValue, validationState, onValueChange, disabled, rounded, size, label, className, title, data, hint, }: ColorPickerProps): JSX.Element;
 export default ColorPickerWithLabel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withLabel/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,6CAA6C;AAC7C,iBAAS,oBAAoB,CAAC,EAC1B,SAAS,EAAE,KAAK,EAChB,OAAO,EACP,IAAI,EACJ,YAAY,EAAE,eAAe,EAC7B,aAAa,EACb,IAAI,EACJ,QAAgB,EAAE,OAAe,EAAE,IAAI,EACvC,KAAK,GACR,EAAE,gBAAgB,eAiHlB;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,6CAA6C;AAC7C,iBAAS,oBAAoB,CAAC,EAC1B,OAAO,EACP,IAAI,EACJ,YAAY,EAAE,eAAe,EAC7B,aAAa,EACb,QAAgB,EAAE,OAAe,EAAE,IAAI,EACvC,KAAK,EAEL,SAAS,EAAE,KAAK,EAAE,IAAI,EACtB,IAAI,GACP,EAAE,gBAAgB,eAmDlB;AAED,eAAe,oBAAoB,CAAC"}

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

@@ -1,48 +1,26 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { generateGuid, getClassName, hexToRgb, isNullOrUndefined, rgbToHex, whiteHex } from "@bodynarf/utils";
-import { getValidationValues, mapDataAttributes } from "../../../../..";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName } from "../../../../../utils";
+import ComponentWithLabel from "../../../internal/componentWithLabel";
 import ColorPickerControl from "../picker";
 /** Color picker component with form label */
-function ColorPickerWithLabel({ className, title, preview, name, defaultValue, validationState, onValueChange, data, disabled = false, rounded = false, size, label, }) {
+function ColorPickerWithLabel({ preview, name, defaultValue, validationState, onValueChange, disabled = false, rounded = false, size, label, className, title, data, hint, }) {
     const defaultColor = isNullOrUndefined(defaultValue)
         ? whiteHex
         : rgbToHex(defaultValue);
     const [value, setValue] = useState(defaultColor);
     const onChange = useCallback((event) => setValue(event.target.value), [setValue]);
     useEffect(() => onValueChange(hexToRgb(value)), [onValueChange, value]);
-    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
     const elClassName = getClassName([
         className,
-        styleClassName,
         rounded ? "is-rounded" : "",
+        getStyleClassName(undefined, validationState),
         isNullOrUndefined(size) ? "" : `is-${size}`,
         "input",
     ]);
-    const inputContainerClassName = getClassName([
-        "control",
-        "bbr-input",
-    ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    const id = name || generateGuid();
-    const labelClassName = getClassName([
-        "label",
-        label.className
-    ]);
-    if (label.horizontal) {
-        const labelContainerClassName = getClassName([
-            "field-label",
-            "is-normal",
-            label.horizontalContainerClassName
-        ]);
-        const fieldContainerClassName = getClassName([
-            "field-body",
-            label.horizontalFieldContainerClassName
-        ]);
-        return (_jsxs("div", { className: "bbr-color-picker 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: _jsx("div", { className: "field", children: _jsx(ColorPickerControl, { id: id, value: value, title: title, disabled: disabled, previewConfig: preview, className: elClassName, onValueChange: onChange, defaultColor: defaultColor, styleClassName: styleClassName, dataAttributes: dataAttributes, validationMessages: validationMessages, isValidationDefined: isValidationDefined, containerClassName: inputContainerClassName }) }) })] }));
-    }
-    return (_jsxs("div", { className: "bbr-color-picker bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx(ColorPickerControl, { id: id, value: value, title: title, disabled: disabled, previewConfig: preview, className: elClassName, onValueChange: onChange, defaultColor: defaultColor, dataAttributes: dataAttributes, styleClassName: styleClassName, validationMessages: validationMessages, isValidationDefined: isValidationDefined, containerClassName: inputContainerClassName })] }));
+    const id = name ?? generateGuid();
+    return (_jsx(ComponentWithLabel, { id: id, label: label, size: size ?? ElementSize.Normal, children: _jsx(ColorPickerControl, { id: id, value: value, disabled: disabled, previewConfig: preview, elementClassName: elClassName, onValueChange: onChange, defaultValue: defaultColor, hint: hint, validationState: validationState, data: data, title: title }) }));
 }
 export default ColorPickerWithLabel;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ColorPickerProps } from "../..";
 /** Color picker component without form label */
-declare function ColorPickerWithoutLabel({ className, title, preview, name, defaultValue, validationState, onValueChange, data, disabled, rounded, size, }: ColorPickerProps): JSX.Element;
+declare function ColorPickerWithoutLabel({ preview, name, defaultValue, validationState, onValueChange, disabled, rounded, size, className, title, data, hint, }: ColorPickerProps): JSX.Element;
 export default ColorPickerWithoutLabel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,gDAAgD;AAChD,iBAAS,uBAAuB,CAAC,EAC7B,SAAS,EAAE,KAAK,EAChB,OAAO,EACP,IAAI,EACJ,YAAY,EAAE,eAAe,EAC7B,aAAa,EACb,IAAI,EACJ,QAAgB,EAAE,OAAe,EAAE,IAAI,GAC1C,EAAE,gBAAgB,eAyDlB;AAED,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,gDAAgD;AAChD,iBAAS,uBAAuB,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,YAAY,EAAE,eAAe,EAC7B,aAAa,EACb,QAAgB,EAAE,OAAe,EAAE,IAAI,EAEvC,SAAS,EAAE,KAAK,EAAE,IAAI,EACtB,IAAI,GACP,EAAE,gBAAgB,eA6ClB;AAED,eAAe,uBAAuB,CAAC"}

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

@@ -1,32 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { generateGuid, getClassName, hexToRgb, isNullOrUndefined, rgbToHex, whiteHex } from "@bodynarf/utils";
-import { getValidationValues, mapDataAttributes } from "../../../../..";
 import ColorPickerControl from "../picker";
 /** Color picker component without form label */
-function ColorPickerWithoutLabel({ className, title, preview, name, defaultValue, validationState, onValueChange, data, disabled = false, rounded = false, size, }) {
+function ColorPickerWithoutLabel({ preview, name, defaultValue, validationState, onValueChange, disabled = false, rounded = false, size, className, title, data, hint, }) {
     const defaultColor = isNullOrUndefined(defaultValue)
         ? whiteHex
         : rgbToHex(defaultValue);
     const [value, setValue] = useState(defaultColor);
     const onChange = useCallback((event) => setValue(event.target.value), [setValue]);
     useEffect(() => onValueChange(hexToRgb(value)), [onValueChange, value]);
-    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
     const elClassName = getClassName([
         className,
-        styleClassName,
         rounded ? "is-rounded" : "",
         isNullOrUndefined(size) ? "" : `is-${size}`,
         "input",
     ]);
-    const containerClassName = getClassName([
-        "control",
-        "bbr-input",
-    ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    const id = name || generateGuid();
-    return (_jsx("div", { className: "bbr-color-picker", children: _jsx(ColorPickerControl, { id: id, title: title, value: value, disabled: disabled, className: elClassName, previewConfig: preview, onValueChange: onChange, defaultColor: defaultColor, dataAttributes: dataAttributes, styleClassName: styleClassName, validationMessages: validationMessages, containerClassName: containerClassName, isValidationDefined: isValidationDefined }) }));
+    const id = name ?? generateGuid();
+    return (_jsx("div", { className: "bbr-color-picker", children: _jsx(ColorPickerControl, { id: id, value: value, disabled: disabled, previewConfig: preview, onValueChange: onChange, defaultValue: defaultColor, elementClassName: elClassName, data: data, title: title, hint: hint, validationState: validationState }) }));
 }
 export default ColorPickerWithoutLabel;

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

@@ -1,6 +1,6 @@
 import { CSSProperties } from "react";
 import { Color } from "@bodynarf/utils";
-import { BaseInputElementProps, ElementFloatPosition } from "../../..";
+import { ElementFloatPosition, BaseInputElementProps } from "../../../types";
 /** Color picker props type */
 export interface ColorPickerProps extends Omit<BaseInputElementProps<Color>, "style" | "loading" | "readonly" | "placeholder"> {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/color/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,MAAM,CAAC;AAEnE,8BAA8B;AAC9B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EACvE,OAAO,GAAG,SAAS,GACjB,UAAU,GAAG,aAAa,CAC/B;IACG;;;OAGG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,yCAAyC;AACzC,MAAM,WAAW,wBAAyB,SAAQ,aAAa;IAC3D,gDAAgD;IAChD,kCAAkC,EAAE,MAAM,CAAC;IAE3C,sDAAsD;IACtD,uBAAuB,EAAE,MAAM,CAAC;CACnC;AAED,6DAA6D;AAC7D,MAAM,WAAW,wBAAwB;IACrC,mCAAmC;IACnC,QAAQ,EAAE,oBAAoB,CAAC;CAClC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/color/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEzE,8BAA8B;AAC9B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EACrE,OAAO,GAAG,SAAS,GACnB,UAAU,GAAG,aAAa,CAC/B;IACG;;;OAGG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,yCAAyC;AACzC,MAAM,WAAW,wBAAyB,SAAQ,aAAa;IAC3D,gDAAgD;IAChD,kCAAkC,EAAE,MAAM,CAAC;IAE3C,sDAAsD;IACtD,uBAAuB,EAAE,MAAM,CAAC;CACnC;AAED,6DAA6D;AAC7D,MAAM,WAAW,wBAAwB;IACrC,mCAAmC;IACnC,QAAQ,EAAE,oBAAoB,CAAC;CAClC"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import "../../../../common.scss";
-import { DateProps } from "../../date";
+import { DateProps } from "../..";
 /** Date input component */
-declare const DatePicker: ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, className, rounded, loading, style, label, onBlur }: DateProps) => JSX.Element;
+declare const DatePicker: ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, rounded, loading, style, label, onBlur, className, title, data, hint, }: DateProps) => JSX.Element;
 export default DatePicker;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/date/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,yBAAyB,CAAC;AAKjC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,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/component/index.tsx"],"names":[],"mappings":";AASA,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,2BAA2B;AAC3B,QAAA,MAAM,UAAU,4JASb,SAAS,KAAG,WA8Dd,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -1,21 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { generateGuid, getClassName, getValueOrDefault, isStringEmpty } from "@bodynarf/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";
 import "../../../../common.scss";
-import { ElementSize } from "../../..";
-import { getValidationValues } from "../../../../utils";
 /** Date input component */
-const DatePicker = ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, className, rounded = false, loading = false, style, label, onBlur }) => {
+const DatePicker = ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, rounded = false, loading = false, style, label, onBlur, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value)
         ? undefined
         : new Date(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,
-        styleClassName,
+        getStyleClassName(style, validationState),
         rounded ? "is-rounded" : "",
         "input",
     ]);
@@ -24,25 +25,9 @@ const DatePicker = ({ defaultValue, onValueChange, readonly, disabled, validatio
         loading ? "is-loading" : "",
     ]);
     const stringifiedDefValue = defaultValue?.toISOString().split("T")[0];
-    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: "date", className: elClassName, readOnly: readonly, disabled: disabled, defaultValue: stringifiedDefValue, 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: "bbr-input 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: stringifiedDefValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), 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: "date", id: id, name: id, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, defaultValue: stringifiedDefValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default DatePicker;

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

@@ -1,8 +1,8 @@
-import { BaseInputElementProps, InputLabel } from "../..";
+import { BaseInputElementProps, LabelConfiguration } from "../../../types";
 /** Date input component props type */
 export interface DateProps extends Omit<BaseInputElementProps<Date | undefined>, "placeholder"> {
     /** Label configuration */
-    label: InputLabel;
+    label: LabelConfiguration;
     /** Focus out event handler */
     onBlur?: () => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/date/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEpE,sCAAsC;AACtC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,IAAI,GAAG,SAAS,CAAC,EAAE,aAAa,CAAC;IAC3F,0BAA0B;IAC1B,KAAK,EAAE,UAAU,CAAC;IAElB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/date/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEvE,sCAAsC;AACtC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,IAAI,GAAG,SAAS,CAAC,EAAE,aAAa,CAAC;IAC3F,0BAA0B;IAC1B,KAAK,EAAE,kBAAkB,CAAC;IAE1B,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}

package/components/primitives/index.d.ts

@@ -5,5 +5,4 @@ export * from "./multiline";
 export * from "./number";
 export * from "./password";
 export * from "./text";
-export * from "./types";
 //# sourceMappingURL=index.d.ts.map

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

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

package/components/primitives/index.js

@@ -5,4 +5,3 @@ export * from "./multiline";
 export * from "./number";
 export * from "./password";
 export * from "./text";
-export * from "./types";

package/components/primitives/internal/componentWithLabel/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ElementSize, LabelConfiguration } from "../../../../types";
+/** Form input component with label props */
+export interface ComponentWithLabelProps {
+    /** Label configuration */
+    label: LabelConfiguration;
+    /** Component size */
+    size: ElementSize;
+    /** Unique component identifier */
+    id: string;
+    /** Node element with input element */
+    children: React.ReactNode;
+}
+/** Form input component with describing label */
+declare const ComponentWithLabel: ({ label, id, size, children, }: ComponentWithLabelProps) => JSX.Element;
+export default ComponentWithLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/internal/componentWithLabel/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAE7D,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACpC,0BAA0B;IAC1B,KAAK,EAAE,kBAAkB,CAAC;IAE1B,qBAAqB;IACrB,IAAI,EAAE,WAAW,CAAC;IAElB,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IAEX,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,iDAAiD;AACjD,QAAA,MAAM,kBAAkB,mCAIrB,uBAAuB,KAAG,WAoD5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/internal/componentWithLabel/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, getValueOrDefault } from "@bodynarf/utils";
+import { ElementSize } from "../../../../types";
+/** Form input component with describing label */
+const ComponentWithLabel = ({ label, id, size, children, }) => {
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+    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: _jsx("div", { className: "field", children: children }) })] }));
+    }
+    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), children] }));
+};
+export default ComponentWithLabel;

package/components/primitives/internal/hint/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { HintConfiguration, ValidationState } from "../../../../types";
+/** Props of `InternalHint` */
+interface HintProps {
+    /** @inheritdoc BaseInputElementProps.validationState */
+    validationState?: ValidationState;
+    /** @inheritdoc BaseInputElementProps.hint */
+    hint?: HintConfiguration;
+}
+/** Hint component for internal use (as form input elements hints) */
+declare const InternalHint: ({ validationState, hint, }: HintProps) => JSX.Element;
+export default InternalHint;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/internal/hint/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAgC,iBAAiB,EAAE,eAAe,EAAoB,MAAM,YAAY,CAAC;AAGhH,8BAA8B;AAC9B,UAAU,SAAS;IACf,wDAAwD;IACxD,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC,6CAA6C;IAC7C,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,qEAAqE;AACrE,QAAA,MAAM,YAAY,+BAEf,SAAS,KAAG,WAgDd,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/primitives/internal/hint/index.js

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementPosition, ElementSize, ValidationStatus } from "../../../../types";
+import Icon from "../../../icon";
+/** Hint component for internal use (as form input elements hints) */
+const InternalHint = ({ validationState, hint, }) => {
+    if (isNullOrUndefined(validationState) && isNullOrUndefined(hint)) {
+        return _jsx(_Fragment, {});
+    }
+    const validationStateDefined = !isNullOrUndefined(validationState)
+        && validationState.status !== ValidationStatus.None
+        && validationState.messages.length > 0;
+    if (validationStateDefined) {
+        const validationClassName = validationState.status === ValidationStatus.Valid
+            ? "is-success"
+            : "is-danger";
+        return (_jsx("p", { className: `help m-help ${validationClassName}`, children: validationState.messages.join("\n") }));
+    }
+    if (isNullOrUndefined(hint)) {
+        return (_jsx(_Fragment, {}));
+    }
+    const className = getClassName([
+        "bbr-hint",
+        "help",
+        "m-help",
+        (hint.grey ?? false) ? "has-text-grey" : undefined,
+        (hint.italic ?? false) ? "is-italic" : undefined,
+    ]);
+    if (!isNullOrUndefined(hint.icon)) {
+        return (_jsx(HintWithIcon, { ...hint, className: className }));
+    }
+    return (_jsx("p", { className: className, children: hint.content }));
+};
+export default InternalHint;
+/** Hint element with icon */
+const HintWithIcon = ({ className, content, icon, }) => {
+    const iconClassName = getClassName([
+        icon.className,
+        icon.position === ElementPosition.Right
+            ? "bbr-icon--right"
+            : "bbr-icon--left"
+    ]);
+    if (icon.position === ElementPosition.Right) {
+        return (_jsxs("p", { className: className, children: [content, _jsx(Icon, { name: icon.name, className: iconClassName, size: icon.size ?? ElementSize.Small })] }));
+    }
+    return (_jsxs("p", { className: className, children: [_jsx(Icon, { name: icon.name, className: iconClassName, size: icon.size ?? ElementSize.Small }), content] }));
+};

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/multiline/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,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/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAIpC,wCAAwC;AACxC,QAAA,MAAM,SAAS,UAAW,cAAc,KAAG,WAK1C,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -1,15 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isNullOrUndefined } from "@bodynarf/utils";
 import "../../../../common.scss";
-import MultilineWithoutLabel from "../../multiline/components/multilineWithoutLabel";
-import MultilineWithLabel from "../../multiline/components/multilineWithLabel";
+import MultilineWithoutLabel from "../components/withoutLabel";
+import MultilineWithLabel from "../components/withLabel";
 /** Multiline textual input component */
 const Multiline = (props) => {
-    if (isNullOrUndefined(props.label)) {
-        return (_jsx(MultilineWithoutLabel, { ...props }));
-    }
-    else {
-        return (_jsx(MultilineWithLabel, { ...props }));
-    }
+    return isNullOrUndefined(props.label)
+        ? _jsx(MultilineWithoutLabel, { ...props })
+        : _jsx(MultilineWithLabel, { ...props });
 };
 export default Multiline;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,6KAUrB,cAAc,KAAG,WAuDnB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/multiline/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 ComponentWithLabel from "../../../internal/componentWithLabel";
+import InternalHint from "../../../internal/hint";
+/** Multiline textual input component with describing label */
+const MultilineWithLabel = ({ defaultValue, onValueChange, validationState, readonly, disabled, name, size, style, loading = false, label, placeholder, fixed = false, rows, 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,
+        getStyleClassName(style, validationState),
+        "textarea",
+        fixed ? "has-fixed-size" : "",
+    ]);
+    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("textarea", { id: id, name: id, rows: rows, 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 MultilineWithLabel;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,gEAAgE;AAChE,QAAA,MAAM,qBAAqB,kJASxB,cAAc,KAAG,WAiDnB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -0,0 +1,28 @@
+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";
+/** Multiline textual input component without describing label*/
+const MultilineWithoutLabel = ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, size, style, loading = false, fixed = false, rows, className, title, data, hint, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const id = name ?? generateGuid();
+    const elClassName = getClassName([
+        className,
+        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        getStyleClassName(style, validationState),
+        "textarea",
+        fixed ? "has-fixed-size" : "",
+    ]);
+    const inputContainerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading ? "is-loading" : "",
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { id: id, name: id, rows: rows, onBlur: onBlur, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+};
+export default MultilineWithoutLabel;

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

@@ -1,4 +1,4 @@
-import { BaseInputElementProps } from "../..";
+import { BaseInputElementProps } from "../../../types";
 /** Multiline textual input component props type */
 export interface MultilineProps extends Omit<BaseInputElementProps<string>, "rounded"> {
     /** Is input should be resizable */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/multiline/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,mDAAmD;AACnD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAClF,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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/multiline/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnD,mDAAmD;AACnD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAClF,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"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { NumberProps } from "../../number";
+import { NumberProps } from "..";
 /** Number input component */
 declare const Number: (props: NumberProps) => JSX.Element;
 export default Number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/number/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,6BAA6B;AAC7B,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,WAOpC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/number/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAIjC,6BAA6B;AAC7B,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,WAIpC,CAAC;AAEF,eAAe,MAAM,CAAC"}