@bodynarf/react.components 1.8.22 → 1.9.1

package/components/paginator/component/index.js

@@ -1,13 +1,14 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
-import { getClassName, isNullOrEmpty } from "@bodynarf/utils";
-import { generatePageNumbers } from "../../paginator";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { mapDataAttributes } from "../../../utils";
+import { ElementPosition } from "../../../types";
+import { generatePageNumbers } from "../..";
 /**
  * Paginator component.
  * Used for visualization of paging configuration
 */
-export default function Paginator({ count, onPageChange, currentPage, position, size, className, rounded = false, showNextButtons = false, nearPagesCount }) {
-    const page = currentPage || 0;
+export default function Paginator({ count, onPageChange, currentPage = 0, position = ElementPosition.Left, size, rounded = false, showNextButtons = false, nearPagesCount, className, title, data, }) {
     const pageChange = useCallback((event) => {
         const target = event.target;
         const pageRaw = target.dataset["page"];
@@ -19,29 +20,33 @@ export default function Paginator({ count, onPageChange, currentPage, position,
             onPageChange(page);
         }
     }, [onPageChange, currentPage, count]);
-    const pageNumbers = useMemo(() => generatePageNumbers(page, count, nearPagesCount), [page, count]);
-    const canGoBack = useMemo(() => page > 1, [page]);
-    const canGoForward = useMemo(() => page < count, [page, count]);
+    const pageNumbers = useMemo(() => generatePageNumbers(currentPage, count, nearPagesCount), [currentPage, count, nearPagesCount]);
+    const canGoBack = useMemo(() => currentPage > 1, [currentPage]);
+    const canGoForward = useMemo(() => currentPage < count, [currentPage, count]);
     if (pageNumbers.length <= 1) {
         return _jsx(_Fragment, {});
     }
     const classNames = getClassName([
         "bbr-paginator",
         "pagination",
-        paginationPositionToClassMap.has(position || "") ? paginationPositionToClassMap.get(position || "") : "",
+        className,
+        paginationPositionToClassMap.get(position),
         rounded ? "is-rounded" : "",
         isNullOrEmpty(size) ? "" : `is-${size}`,
-        className
     ]);
-    return (_jsxs("nav", { className: classNames, role: "navigation", "aria-label": "pagination", children: [showNextButtons &&
-                _jsxs(_Fragment, { children: [_jsx("a", { className: `pagination-previous${canGoBack ? "" : " is-disabled"}`, "data-page": page - 1, onClick: pageChange, children: "Previous" }), _jsx("a", { className: `pagination-next${canGoForward ? "" : " is-disabled"}`, "data-page": page + 1, onClick: pageChange, children: "Next page" })] }), _jsxs("ul", { className: "pagination-list", children: [page !== 1 && !pageNumbers.includes(1) &&
-                        _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": "Goto page 1", "data-page": 1, onClick: pageChange, children: "1" }) }), _jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) })] }), pageNumbers.map(x => _jsx("li", { children: _jsx("a", { className: `pagination-link${page === x ? " is-current" : ""}`, "aria-label": `Goto page ${x}`, "data-page": x, onClick: pageChange, children: x }) }, x)), page != count && !pageNumbers.includes(count) &&
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs("nav", { className: classNames, role: "navigation", "aria-label": "pagination", title: title, ...dataAttributes, children: [showNextButtons &&
+                _jsxs(_Fragment, { children: [_jsx("a", { className: `pagination-previous${canGoBack ? "" : " is-disabled"}`, "data-page": currentPage - 1, onClick: pageChange, children: "Previous" }), _jsx("a", { className: `pagination-next${canGoForward ? "" : " is-disabled"}`, "data-page": currentPage + 1, onClick: pageChange, children: "Next page" })] }), _jsxs("ul", { className: "pagination-list", children: [currentPage !== 1 && !pageNumbers.includes(1) &&
+                        _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": "Goto page 1", "data-page": 1, onClick: pageChange, children: "1" }) }), _jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) })] }), pageNumbers.map(x => _jsx("li", { children: _jsx("a", { className: `pagination-link${currentPage === x ? " is-current" : ""}`, "aria-label": `Goto page ${x}`, "data-page": x, onClick: pageChange, children: x }) }, x)), currentPage != count && !pageNumbers.includes(count) &&
                         _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) }), _jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": `Goto page ${count}`, "data-page": count, onClick: pageChange, children: count }) })] })] })] }));
 }
 /**
  * Position setting to css class name map
  */
 const paginationPositionToClassMap = new Map([
-    ["center", "is-centered"],
-    ["right", "is-right"]
+    [ElementPosition.Left, ""],
+    [ElementPosition.Center, "is-centered"],
+    [ElementPosition.Right, "is-right"]
 ]);

package/components/paginator/types.d.ts

@@ -1,5 +1,5 @@
-import { ElementSize } from "..";
-export interface PaginatorProps {
+import { BaseElementProps, ElementPosition, ElementSize } from "../../types";
+export interface PaginatorProps extends BaseElementProps {
     /** Amount of pages */
     count: number;
     /** Page change handler */
@@ -10,13 +10,11 @@ export interface PaginatorProps {
      * Page numbers position.
      * Useful with `showNextButtons = true`
     */
-    position?: "left" | "center" | "right";
+    position?: ElementPosition;
     /** Buttons should have rounded borders */
     rounded?: boolean;
     /** Size of paginator component elements */
     size?: ElementSize;
-    /** Additional class names */
-    className?: string;
     /** Display "Previous" \ "Next" buttons */
     showNextButtons?: boolean;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC3B,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;MAGE;IACF,QAAQ,CAAC,EACP,MAAM,GACN,QAAQ,GACR,OAAO,CACR;IAED,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;MAGE;IACF,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE5E,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACpD,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;MAGE;IACF,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;MAGE;IACF,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B"}

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import "./style.scss";
-import { CheckBoxProps } from "../../checkbox";
+import { CheckBoxProps } from "../..";
 /** Boolean input component */
-declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, size, style, rounded, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, }: CheckBoxProps) => JSX.Element;
+declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, size, style, rounded, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, className, title, data, }: CheckBoxProps) => JSX.Element;
 export default CheckBox;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/checkbox/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,8BAA8B;AAC9B,QAAA,MAAM,QAAQ,6JAOX,aAAa,KAAG,WAoFlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/checkbox/component/index.tsx"],"names":[],"mappings":"AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,8BAA8B;AAC9B,QAAA,MAAM,QAAQ,qLASX,aAAa,KAAG,WA8ElB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,14 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../types";
+import { mapDataAttributes } from "../../../../utils";
+import ComponentWithLabel from "../../internal/componentWithLabel";
 import "./style.scss";
 /** Boolean input component */
-const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, size, style, rounded = false, block = false, withoutBorder = false, hasBackgroundColor = false, fixBackgroundColor = false, isFormLabel = false, }) => {
+const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, size, style, rounded = false, block = false, withoutBorder = false, hasBackgroundColor = false, fixBackgroundColor = false, isFormLabel = false, className, title, data, }) => {
     const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
-    const id = name || generateGuid();
-    const className = getClassName([
+    const id = name ?? generateGuid();
+    const elClassName = getClassName([
         "is-checkradio",
         "m-check-radio",
+        className,
         hasBackgroundColor ? "has-background-color" : "",
         fixBackgroundColor && hasBackgroundColor ? "m-has-background-color" : "",
         isNullOrUndefined(size) ? "" : size === "normal" ? "" : `is-${size}`,
@@ -17,21 +21,15 @@ const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, size, st
         block ? "is-block" : "",
         withoutBorder ? "has-no-border" : "",
     ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
     if (!isNullOrUndefined(label) && isFormLabel) {
-        const labelClassName = getClassName([
-            "label",
-            label.className
-        ]);
-        const labelContainerClassName = getClassName([
-            "field-label",
-            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, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("input", { type: "checkbox", name: id, id: id, disabled: disabled, onChange: onChecked, className: className, defaultChecked: defaultValue }), _jsx("label", { htmlFor: id })] }) })] }));
+        return (_jsxs(ComponentWithLabel, { id: id, label: {
+                ...label,
+                horizontalContainerClassName: getClassName([label.horizontalContainerClassName, "p-0"]),
+            }, size: ElementSize.Normal, children: [_jsx("input", { type: "checkbox", id: id, name: id, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, title: title, ...dataAttributes }), _jsx("label", { htmlFor: id })] }));
     }
-    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("input", { type: "checkbox", name: id, id: id, disabled: disabled, onChange: onChecked, className: className, defaultChecked: defaultValue }), _jsx("label", { htmlFor: id, children: label?.caption })] }));
+    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("input", { type: "checkbox", id: id, name: id, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, title: title, ...dataAttributes }), _jsx("label", { htmlFor: id, children: label?.caption })] }));
 };
 export default CheckBox;

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

@@ -1,6 +1,6 @@
-import { BaseInputElementProps } from "../..";
+import { BaseInputElementProps } from "../../../types";
 /** Checkbox component props type */
-export interface CheckBoxProps extends Omit<BaseInputElementProps<boolean>, "readonly" | "validationState" | "loading" | "placeholder"> {
+export interface CheckBoxProps extends Omit<BaseInputElementProps<boolean>, "readonly" | "validationState" | "loading" | "placeholder" | "hint"> {
     /** Is full colored checkbox */
     block?: boolean;
     /** Remove the checkbox border */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACtE,UAAU,GAAG,iBAAiB,GAC5B,SAAS,GAAG,aAAa,CAC9B;IACG,+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;IAE7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACtE,UAAU,GAAG,iBAAiB,GAC5B,SAAS,GAAG,aAAa,GACzB,MAAM,CACX;IACG,+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;IAE7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/color/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAKtC,6BAA6B;AAC7B,QAAA,MAAM,WAAW,UAAW,gBAAgB,KAAG,WAGF,CACxC;AAEL,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/color/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAItC,6BAA6B;AAC7B,QAAA,MAAM,WAAW,UAAW,gBAAgB,KAAG,WAGF,CACxC;AAEL,eAAe,WAAW,CAAC"}

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

@@ -1,38 +1,20 @@
 import { ChangeEvent } from "react";
-import { ElementSize } from "../../../../..";
+import { BaseInputElementProps } from "../../../../../types";
 import { ColorPickerPreviewConfig } from "../..";
-/** Color picker control container props */
-export interface ColorPickerControlProps {
-    /** Class names of control container */
-    containerClassName: string;
+/** Props of `ColorPickerControl` */
+export interface ColorPickerControlProps extends Omit<BaseInputElementProps<string>, "onValueChange" | "placeholder" | "rounded" | "readonly" | "loading" | "className"> {
+    /** Preview element configuration */
+    previewConfig?: ColorPickerPreviewConfig;
+    /** Current color value */
+    value: string;
+    /** Control unique identifier */
+    id: string;
     /** Class names of control */
-    className: string;
-    /** Default value for color control */
-    defaultColor: string;
+    elementClassName: string;
     /** Handler of control value change*/
     onValueChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    /** Control unique identifier */
-    id: string;
-    /** Extra data-* attributes */
-    dataAttributes?: object;
-    /** Is validation should be displayed */
-    isValidationDefined: boolean;
-    /** Validation messages */
-    validationMessages: Array<string>;
-    /** Validation style class name */
-    styleClassName: string;
-    /** Current color value */
-    value: string;
-    /** Should be component disabled. Selecting is not allowed */
-    disabled?: boolean;
-    /** Preview element configuration */
-    previewConfig?: ColorPickerPreviewConfig;
-    /** Component size */
-    size?: ElementSize;
-    /** Title */
-    title?: string;
 }
 /** Color picker container component */
-declare const ColorPickerControl: ({ containerClassName, className, disabled, previewConfig, size, defaultColor, onValueChange, value, id, title, dataAttributes, isValidationDefined, validationMessages, styleClassName, }: ColorPickerControlProps) => JSX.Element;
+declare const ColorPickerControl: ({ elementClassName, disabled, previewConfig, size, defaultValue, onValueChange, value, id, title, data, hint, validationState, }: ColorPickerControlProps) => JSX.Element;
 export default ColorPickerControl;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/picker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAmB,WAAW,EAAE,MAAM,MAAM,CAAC;AACpD,OAAO,EAA4B,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE3E,2CAA2C;AAC3C,MAAM,WAAW,uBAAuB;IACpC,uCAAuC;IACvC,kBAAkB,EAAE,MAAM,CAAC;IAE3B,6BAA6B;IAC7B,SAAS,EAAE,MAAM,CAAC;IAElB,sCAAsC;IACtC,YAAY,EAAE,MAAM,CAAC;IAErB,qCAAqC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE9D,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IAEX,8BAA8B;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,wCAAwC;IACxC,mBAAmB,EAAE,OAAO,CAAC;IAE7B,0BAA0B;IAC1B,kBAAkB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAElC,kCAAkC;IAClC,cAAc,EAAE,MAAM,CAAC;IAEvB,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC,qBAAqB;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,uCAAuC;AACvC,QAAA,MAAM,kBAAkB,8LAOrB,uBAAuB,KAAG,WAwC5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/picker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAmB,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAIpE,OAAO,EAA4B,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE3E,oCAAoC;AACpC,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACjD,qBAAqB,CAAC,MAAM,CAAC,EAC3B,eAAe,GAAG,aAAa,GAC/B,SAAS,GAAG,UAAU,GACtB,SAAS,GAAG,WAAW,CAC5B;IACG,oCAAoC;IACpC,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IAEX,6BAA6B;IAC7B,gBAAgB,EAAE,MAAM,CAAC;IAEzB,qCAAqC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACjE;AAED,uCAAuC;AACvC,QAAA,MAAM,kBAAkB,qIAOrB,uBAAuB,KAAG,WA0C5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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,6 @@
-/// <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"}