@bodynarf/react.components 1.8.22 → 1.9.0

package/components/dropdown/components/item/index.js

@@ -1,6 +1,38 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementPosition } from "../../../../types";
+import Icon from "../../../icon/component";
 /** Single item in dropdown component */
 const DropdownItem = ({ item, selected, onClick }) => {
-    return (_jsx("li", { className: `bbr-dropdown-item dropdown-item${selected ? " is-active" : ""}`, onClick: onClick, "data-dropdown-item-value": item.value, title: item.displayValue, children: item.displayValue }, item.id));
+    if (!isNullOrUndefined(item.icon)) {
+        return _jsx(DropdownItemWithIcon, { item: item, selected: selected, onClick: onClick });
+    }
+    const className = getClassName([
+        "bbr-dropdown-item",
+        "dropdown-item",
+        selected ? "is-active" : "",
+        "is-flex is-align-items-center",
+    ]);
+    return (_jsx("li", { onClick: onClick, className: className, "data-dropdown-item-value": item.value, title: item.title, children: item.displayValue }, item.id));
 };
 export default DropdownItem;
+/** Single item in dropdown component with icon */
+const DropdownItemWithIcon = ({ item, selected, onClick }) => {
+    const icon = item.icon;
+    const className = getClassName([
+        "bbr-dropdown-item",
+        "dropdown-item",
+        selected ? "is-active" : "",
+        "is-flex is-align-items-center",
+    ]);
+    const iconClassName = getClassName([
+        icon.className,
+        icon.position === ElementPosition.Right
+            ? "bbr-icon--right"
+            : "bbr-icon--left",
+    ]);
+    if (icon.position === ElementPosition.Right) {
+        return (_jsxs("li", { onClick: onClick, className: className, "data-dropdown-item-value": item.value, title: item.title, children: [item.displayValue, _jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName })] }, item.id));
+    }
+    return (_jsxs("li", { onClick: onClick, className: className, "data-dropdown-item-value": item.value, title: item.title, children: [_jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName }), item.displayValue] }, item.id));
+};

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

@@ -1,5 +1,5 @@
 import { MouseEvent } from "react";
-import { SelectableItem } from "../../../dropdown";
+import { SelectableItem } from "../..";
 export interface DropdownLabelProps {
     /** Caption when no items selected */
     caption: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOnC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,kBAAkB;IAC/B,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,iEAIhB,kBAAkB,KAAG,WAkCvB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOnC,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IAC/B,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,iEAIhB,kBAAkB,KAAG,WA4CvB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/dropdown/components/label/index.js

@@ -1,22 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementSize } from "../../..";
+import { ElementPosition, ElementSize } from "../../../../types";
 import Icon from "../../../icon";
 /** Label component */
 const DropdownLabel = ({ caption, selectedItem, onClick, deselectable, className, }) => {
-    const itemSelected = !isNullOrUndefined(selectedItem);
-    const text = itemSelected
-        ? selectedItem?.displayValue
-        : caption;
-    const deselectVisible = deselectable && itemSelected;
+    if (isNullOrUndefined(selectedItem)) {
+        return _jsx(EmptyLabel, { caption: caption, deselectable: deselectable, onClick: onClick, className: className });
+    }
+    if (!isNullOrUndefined(selectedItem.icon)) {
+        return _jsx(SelectedItemLabelWithIcon, { caption: caption, deselectable: deselectable, onClick: onClick, className: className, selectedItem: selectedItem });
+    }
     const elClassName = getClassName([
         "dropdown-trigger",
         "bbr-dropdown__label",
         isNullOrEmpty(className) ? "" : `${className}--md`,
-        itemSelected ? "" : "bbr-dropdown__label--default",
         "button"
     ]);
-    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [deselectVisible &&
-                _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [deselectable &&
+                _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsx("span", { className: deselectable ? "px-2" : "pr-2", title: selectedItem.title, children: selectedItem.displayValue }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
 };
 export default DropdownLabel;
+const EmptyLabel = ({ caption, onClick, className, }) => {
+    const elClassName = getClassName([
+        "dropdown-trigger",
+        "bbr-dropdown__label",
+        isNullOrEmpty(className) ? "" : `${className}--md`,
+        "bbr-dropdown__label--default",
+        "button"
+    ]);
+    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [_jsx("span", { className: "mr-2", children: caption }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+};
+const SelectedItemLabelWithIcon = ({ selectedItem, onClick, deselectable, className, }) => {
+    const elClassName = getClassName([
+        "dropdown-trigger",
+        "bbr-dropdown__label",
+        isNullOrEmpty(className) ? "" : `${className}--md`,
+        "button"
+    ]);
+    const icon = selectedItem.icon;
+    const iconClassName = getClassName([
+        icon.className,
+        icon.position === ElementPosition.Right
+            ? "bbr-icon--right"
+            : "bbr-icon--left",
+        "bbr-dropdown-item__icon"
+    ]);
+    if (icon.position === ElementPosition.Right) {
+        return (_jsxs("label", { className: elClassName, onClick: onClick, children: [deselectable &&
+                    _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsxs("span", { className: deselectable ? "px-2" : "pr-2", title: selectedItem.title, children: [selectedItem.displayValue, _jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName })] }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+    }
+    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [deselectable &&
+                _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsxs("span", { className: deselectable ? "mx-2" : "mr-2", title: selectedItem.title, children: [_jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName }), selectedItem.displayValue] }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DropdownProps } from "../../../dropdown";
-declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder, disabled, }: DropdownProps) => JSX.Element;
+import { DropdownProps } from "../..";
+declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, hideOnOuterClick, listMaxHeight, label, placeholder, disabled, className, title, data, hint, }: DropdownProps) => JSX.Element;
 export default DropdownWithLabel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIzD,QAAA,MAAM,iBAAiB,yIAOpB,aAAa,KAAG,WAoLlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,QAAA,MAAM,iBAAiB,4JASpB,aAAa,KAAG,WAiMlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/dropdown/components/withLabel/index.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useState } from "react";
 import { isNullOrUndefined, isNullOrEmpty, getClassName } from "@bodynarf/utils";
-import { getValidationValues } from "../../../../utils";
+import { getStyleClassName, mapDataAttributes } from "../../../../utils";
 import { useComponentOutsideClick } from "../../../../hooks";
-import DropdownItem from "../../../dropdown/components/item";
-import DropdownLabel from "../../../dropdown/components/label";
-const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectable = false, className, hideOnOuterClick, listMaxHeight, label, placeholder, disabled = false, }) => {
+import InternalHint from "../../../primitives/internal/hint";
+import DropdownItem from "../../components/item";
+import DropdownLabel from "../../components/label";
+const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectable = false, hideOnOuterClick, listMaxHeight, label, placeholder, disabled = false, className, title, data, hint, }) => {
     const id = useId();
     const [isListVisible, setListVisible] = useState(false);
-    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
     const onItemClick = useCallback((event) => {
         if (disabled) {
             return;
@@ -50,16 +50,20 @@ const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectab
     useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
     const classNames = getClassName([
         "bbr-dropdown",
+        className,
         disabled ? "bbr-dropdown--disabled" : "",
         isListVisible ? "is-active" : "",
         isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
-        className,
         "dropdown"
     ]);
     const labelClassName = getClassName([
         "label",
         label.className
     ]);
+    const labelComponentClassName = getStyleClassName(undefined, validationState);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
     if (label.horizontal) {
         const labelContainerClassName = getClassName([
             "field-label",
@@ -70,14 +74,12 @@ const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectab
             "field-body",
             label.horizontalFieldContainerClassName
         ]);
-        return (_jsxs("div", { className: "bbr-dropdown__root-container--with-label 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: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { className: styleClassName, caption: placeholder, deselectable: deselectable, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
+        return (_jsxs("div", { className: "bbr-dropdown__root-container--with-label 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: classNames, "data-dropdown-id": id, title: title, ...dataAttributes, children: [_jsx(DropdownLabel, { selectedItem: value, caption: placeholder, onClick: onLabelClick, deselectable: deselectable, className: labelComponentClassName }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
                                             ? _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
-                                            : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), isValidationDefined && validationMessages.length > 0 &&
-                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
+                                            : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), _jsx(InternalHint, { hint: hint, validationState: validationState })] }) })] }));
     }
-    return (_jsxs("div", { className: "field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { className: styleClassName, caption: placeholder, deselectable: deselectable, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
+    return (_jsxs("div", { className: "field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsxs("div", { className: classNames, "data-dropdown-id": id, title: title, ...dataAttributes, children: [_jsx(DropdownLabel, { selectedItem: value, caption: placeholder, onClick: onLabelClick, deselectable: deselectable, className: labelComponentClassName }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
                             ? _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
-                            : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), isValidationDefined && validationMessages.length > 0 &&
-                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+                            : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default DropdownWithLabel;

package/components/dropdown/types.d.ts

@@ -1,4 +1,4 @@
-import { BaseElementProps, InputLabel, ValidationState } from "..";
+import { BaseElementProps, HintConfiguration, ValidationState, LabelConfiguration, ElementIcon } from "../../types";
 /** Dropdown item */
 export interface SelectableItem {
     /** Unique item identifier */
@@ -7,6 +7,10 @@ export interface SelectableItem {
     value: string;
     /** Displaying text */
     displayValue: string;
+    /** Element title */
+    title?: string;
+    /** Element icon configuration */
+    icon?: ElementIcon;
 }
 /** Dropdown component props type */
 export interface DropdownProps extends BaseElementProps {
@@ -39,8 +43,15 @@ export interface DropdownProps extends BaseElementProps {
      */
     disabled?: boolean;
     /** Label configuration */
-    label?: InputLabel;
+    label?: LabelConfiguration;
     /** Current validation state */
     validationState?: ValidationState;
+    /**
+     * Field hint configuration.
+     * Provides additional information to user to help fill the field
+     *
+     * (!) Hint will be overridden by the validation state, if specified
+     */
+    hint?: HintConfiguration;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEhF,oBAAoB;AACpB,MAAM,WAAW,cAAc;IAC3B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,sBAAsB;IACtB,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACnD,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,eAAe,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEnH,oBAAoB;AACpB,MAAM,WAAW,cAAc;IAC3B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,sBAAsB;IACtB,YAAY,EAAE,MAAM,CAAC;IAErB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,iCAAiC;IACjC,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACnD,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC5B"}

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import "./style.scss";
-import { IconProps } from "../../icon";
+import { IconProps } from "../..";
 /**
  * Icon component. Based on bootstrap icons
  */
-export default function Icon({ name, size, className, }: IconProps): JSX.Element;
+export default function Icon({ name, size, className, title, data, }: IconProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAItB,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AASjD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EACzB,IAAI,EAAE,IAAyB,EAC/B,SAAS,GACZ,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAYzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/component/index.tsx"],"names":[],"mappings":";AAKA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASlC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EACzB,IAAI,EAAE,IAAyB,EAE/B,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAqBzB"}

package/components/icon/component/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassName } from "@bodynarf/utils";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../types";
+import { mapDataAttributes } from "../../../utils";
 import "./style.scss";
-import { ElementSize } from "../..";
 const sizeToClassMap = new Map([
     [ElementSize.Small, "bbr-icon--size-small"],
     [ElementSize.Normal, ""],
@@ -11,13 +12,16 @@ const sizeToClassMap = new Map([
 /**
  * Icon component. Based on bootstrap icons
  */
-export default function Icon({ name, size = ElementSize.Normal, className, }) {
+export default function Icon({ name, size = ElementSize.Normal, className, title, data, }) {
     const classNames = getClassName([
         "bbr-icon",
         "bi",
         `bi-${name}`,
+        className,
         sizeToClassMap.has(size) ? sizeToClassMap.get(size) : "",
-        className
     ]);
-    return (_jsx("i", { className: classNames }));
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsx("i", { className: classNames, title: title, ...dataAttributes }));
 }

package/components/icon/types.d.ts

@@ -1,6 +1,6 @@
-import { ElementSize } from "..";
+import { BaseElementProps, ElementSize } from "../../types";
 /** Icon component props */
-export interface IconProps {
+export interface IconProps extends BaseElementProps {
     /**
      * Icon name. Must be without `bi-`
      * @example ["Arrow repeat", "arrow-repeat"]
@@ -8,8 +8,6 @@ export interface IconProps {
      * // For class name check bootstrap icons website
     */
     name: string;
-    /** Additional classname */
-    className?: string;
     /** Icon size */
     size?: ElementSize;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,2BAA2B;AAC3B,MAAM,WAAW,SAAS;IACtB;;;;;MAKE;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE3D,2BAA2B;AAC3B,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C;;;;;MAKE;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB"}

package/components/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./types";
 export * from "./accordion";
 export * from "./anchor";
 export * from "./button";

package/components/index.d.ts.map

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

package/components/index.js

@@ -1,4 +1,3 @@
-export * from "./types";
 export * from "./accordion";
 export * from "./anchor";
 export * from "./button";

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { PaginatorProps } from "../../paginator";
+import { PaginatorProps } from "../..";
 /**
  * Paginator component.
  * Used for visualization of paging configuration
 */
-export default function Paginator({ count, onPageChange, currentPage, position, size, className, rounded, showNextButtons, nearPagesCount }: PaginatorProps): JSX.Element;
+export default function Paginator({ count, onPageChange, currentPage, position, size, rounded, showNextButtons, nearPagesCount, className, title, data, }: PaginatorProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/paginator/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAuB,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhF;;;EAGE;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,YAAY,EAAE,WAAW,EAChC,QAAQ,EACR,IAAI,EAAE,SAAS,EACf,OAAe,EAAE,eAAuB,EACxC,cAAc,EACjB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA4G9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/paginator/component/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AAE5D;;;EAGE;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,YAAY,EAAE,WAAe,EACpC,QAA+B,EAC/B,IAAI,EACJ,OAAe,EAAE,eAAuB,EACxC,cAAc,EAEd,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAqH9B"}

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