@bodynarf/react.components 1.7.632 → 1.8.0

package/common.scss

@@ -1,3 +1,7 @@
 .help.m-help {
     white-space: pre-line;
+}
+
+.control.is-loading input[type="date"]::-webkit-calendar-picker-indicator {
+    display: none;
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./style.scss";
 import { AccordionProps } from "../../accordion";
 /** Accordion panel */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/accordion/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAOtB,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,sBAAsB;AACtB,QAAA,MAAM,SAAS,2FAKZ,cAAc,KAAG,WA8DnB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/accordion/component/index.tsx"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AAOtB,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,sBAAsB;AACtB,QAAA,MAAM,SAAS,2FAMZ,cAAc,KAAG,WA8DnB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/accordion/component/index.js

@@ -6,13 +6,13 @@ import { ElementSize } from "../..";
 import Icon from "../../icon";
 import { mapDataAttributes } from "../../../utils";
 /** Accordion panel */
-const Accordion = ({ children, caption, style, size, defaultExpanded, onToggle, className, data, title, }) => {
+const Accordion = ({ children, caption, style, size = ElementSize.Normal, defaultExpanded = false, onToggle, className, data, title, }) => {
     const expandablePanelRef = useRef(null);
-    const [isExpanded, setIsExpanded] = useState(defaultExpanded ?? false);
-    const [maxHeight, setMaxHeight] = useState(defaultExpanded === true ? undefined : 0);
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    const [maxHeight, setMaxHeight] = useState(defaultExpanded ? undefined : 0);
     const toggleCollapse = useCallback(() => setMaxHeight(isExpanded ? 0 : expandablePanelRef.current.scrollHeight), [isExpanded]);
     useEffect(() => {
-        if (defaultExpanded === true && !isNullOrUndefined(expandablePanelRef.current)) {
+        if (defaultExpanded && !isNullOrUndefined(expandablePanelRef.current)) {
             setMaxHeight(expandablePanelRef.current.scrollHeight);
         }
     }, [defaultExpanded]);
@@ -30,6 +30,6 @@ const Accordion = ({ children, caption, style, size, defaultExpanded, onToggle,
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs("article", { className: elClassName, "aria-expanded": isExpanded, ...dataAttributes, children: [_jsxs("div", { className: "message-header is-unselectable", onClick: toggleCollapse, children: [_jsx("span", { title: title, children: caption }), _jsx(Icon, { name: "arrow-down", size: size ?? ElementSize.Medium })] }), _jsx("div", { className: "message-body", ref: expandablePanelRef, style: { maxHeight: `${maxHeight}px` }, children: _jsx("div", { className: "message-body__content", children: children }) })] }));
+    return (_jsxs("article", { className: elClassName, "aria-expanded": isExpanded, ...dataAttributes, children: [_jsxs("div", { className: "message-header is-unselectable", onClick: toggleCollapse, children: [_jsx("span", { title: title, children: caption }), _jsx(Icon, { name: "arrow-down", size: size })] }), _jsx("div", { className: "message-body", ref: expandablePanelRef, style: { maxHeight: `${maxHeight}px` }, children: _jsx("div", { className: "message-body__content", children: children }) })] }));
 };
 export default Accordion;

package/components/anchor/components/anchorWithIcon/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AnchorWithIconProps } from "../../../anchor";
 /** Anchor with icon component */
 export declare const AnchorWithIcon: ({ href, className, onClick, caption, title, target, icon }: AnchorWithIconProps) => JSX.Element;

package/components/anchor/components/anchorWithIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/anchorWithIcon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,iCAAiC;AACjC,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,KAAG,WAqChH,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/anchorWithIcon/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,iCAAiC;AACjC,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,KAAG,WAqChH,CAAC"}

package/components/anchor/components/simpleAnchor/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SimpleAnchorProps } from "../../../anchor";
 /** Simple anchor component, without icon */
 export declare const SimpleAnchor: ({ href, className, onClick, caption, title, target }: SimpleAnchorProps) => JSX.Element;

package/components/anchor/components/simpleAnchor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/simpleAnchor/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,4CAA4C;AAC5C,eAAO,MAAM,YAAY,yDAA0D,iBAAiB,KAAG,WAYtG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/simpleAnchor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,4CAA4C;AAC5C,eAAO,MAAM,YAAY,yDAA0D,iBAAiB,KAAG,WAYtG,CAAC"}

package/components/anchor/types.d.ts

@@ -1,18 +1,8 @@
 import { ElementIcon } from "..";
 /** Anchor component props type */
-export interface AnchorProps {
-    /** Link destination */
-    href?: string;
-    /** Link caption  */
-    caption?: string;
-    /** Click handler */
-    onClick?: () => void;
+export interface AnchorProps extends Omit<SimpleAnchorProps, "className"> {
     /** Configuration od inner icon */
     icon?: ElementIcon;
-    /** Title of anchor */
-    title?: string;
-    /** Where to open the linked document */
-    target?: "_blank" | "_top";
     /** Additional class names */
     className?: string;
     /** Should css hovering effects be disabled */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/anchor/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,kCAAkC;AAClC,MAAM,WAAW,WAAW;IACxB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAE3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAiB;IAC9B,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,kBAAkB;IAClB,SAAS,EAAE,MAAM,CAAC;IAElB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC1D,4BAA4B;IAC5B,IAAI,EAAE,WAAW,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/anchor/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,iBAAiB,EAAE,WAAW,CAAC;IACrE,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAiB;IAC9B,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,kBAAkB;IAClB,SAAS,EAAE,MAAM,CAAC;IAElB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC1D,4BAA4B;IAC5B,IAAI,EAAE,WAAW,CAAC;CACrB"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/button/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,WAAW,EAAe,MAAM,iBAAiB,CAAC;AAO3D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0C9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/button/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,WAAW,EAAe,MAAM,iBAAiB,CAAC;AAO3D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAkD9D"}

package/components/button/component/index.js

@@ -12,17 +12,18 @@ export default function Button(props) {
     if (isNullOrEmpty(props.caption) && isNullOrUndefined(props.icon)) {
         throw new Error("No button content provided.");
     }
+    const { light = false, outlined = false, rounded = false, isLoading = false, static: isStatic = false } = props;
     const className = getClassName([
         "button",
         "bbr-button",
         props.className,
         `is-${props.type}`,
-        props.light === true ? "is-light" : "",
+        light ? "is-light" : "",
         !isNullOrUndefined(props.size) ? `is-${props.size}` : "",
-        props.outlined === true ? "is-outlined" : "",
-        props.rounded === true ? "is-rounded" : "",
-        props.isLoading === true ? "is-loading" : "",
-        props.static === true ? "is-static" : "",
+        outlined ? "is-outlined" : "",
+        rounded ? "is-rounded" : "",
+        isLoading ? "is-loading" : "",
+        isStatic ? "is-static" : "",
     ]);
     const data = isNullOrUndefined(props.data)
         ? undefined

package/components/button/components/buttonWithIcon/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonWithIconProps } from "../../../button";
 /** Button with icon component */
 export declare const ButtonWithIcon: ({ className, disabled, onClick, caption, title, icon, data, }: ButtonWithIconProps) => JSX.Element;

package/components/button/components/buttonWithIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,iCAAiC;AACjC,eAAO,MAAM,cAAc,kEAKxB,mBAAmB,KAAG,WAwCxB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,iCAAiC;AACjC,eAAO,MAAM,cAAc,kEAKxB,mBAAmB,KAAG,WAwCxB,CAAC"}

package/components/button/components/simpleButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SimpleButtonProps } from "../../../button";
 /** Simple button component, without icon */
 export declare const SimpleButton: ({ className, disabled, onClick, caption, title, data }: SimpleButtonProps) => JSX.Element;

package/components/button/components/simpleButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/simpleButton/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,4CAA4C;AAC5C,eAAO,MAAM,YAAY,2DAKtB,iBAAiB,KAAG,WAYtB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/simpleButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,4CAA4C;AAC5C,eAAO,MAAM,YAAY,2DAKtB,iBAAiB,KAAG,WAYtB,CAAC"}

package/components/button/types.d.ts

@@ -24,7 +24,8 @@ export interface ButtonProps extends BaseElementProps {
     onClick?: () => void;
 }
 /** Button types according to Bulma framework */
-export declare type ButtonType = "default" /** color: transparent */ | "primary" /** color: sea-wave green */ | "link" /** color: blue-violet */ | "info" /** color: sky-blue */ | "success" /** color: green */ | "warning" /** color: yellow */ | "danger" /** color: red */ | "white" /** color: white */ | "light" /** color: light-gray */ | "dark" /** color: dark-gray */ | "black" /** color: black */ | "text" /** Underline text with color: gray */ | "ghost" /** Blue underline text with color: transparent */;
+export declare type ButtonType = // TODO: to enum
+"default" /** color: transparent */ | "primary" /** color: sea-wave green */ | "link" /** color: blue-violet */ | "info" /** color: sky-blue */ | "success" /** color: green */ | "warning" /** color: yellow */ | "danger" /** color: red */ | "white" /** color: white */ | "light" /** color: light-gray */ | "dark" /** color: dark-gray */ | "black" /** color: black */ | "text" /** Underline text with color: gray */ | "ghost" /** Blue underline text with color: transparent */;
 /** Simple button props type */
 export interface SimpleButtonProps extends Omit<ButtonProps, 'className'> {
     /** Button class name*/

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE7E,MAAM,WAAW,WAAY,SAAQ,gBAAgB;IACjD,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,IAAI,EAAE,UAAU,CAAC;IAEjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,gDAAgD;AAChD,oBAAY,UAAU,GAClB,SAAS,CAAC,yBAAyB,GACjC,SAAS,CAAC,4BAA4B,GACtC,MAAM,CAAC,yBAAyB,GAChC,MAAM,CAAC,sBAAsB,GAC7B,SAAS,CAAC,mBAAmB,GAC7B,SAAS,CAAC,oBAAoB,GAC9B,QAAQ,CAAC,iBAAiB,GAC1B,OAAO,CAAC,mBAAmB,GAC3B,OAAO,CAAC,wBAAwB,GAChC,MAAM,CAAC,uBAAuB,GAC9B,OAAO,CAAC,mBAAmB,GAC3B,MAAM,CAAC,sCAAsC,GAC7C,OAAO,CAAC,kDAAkD,CAC3D;AAEL,+BAA+B;AAC/B,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IACrE,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC1D,yBAAyB;IACzB,IAAI,EAAE,WAAW,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE7E,MAAM,WAAW,WAAY,SAAQ,gBAAgB;IACjD,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,IAAI,EAAE,UAAU,CAAC;IAEjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,gDAAgD;AAChD,oBAAY,UAAU,GAClB,AADqB,gBAAgB;AACrC,SAAS,CAAC,yBAAyB,GACjC,SAAS,CAAC,4BAA4B,GACtC,MAAM,CAAC,yBAAyB,GAChC,MAAM,CAAC,sBAAsB,GAC7B,SAAS,CAAC,mBAAmB,GAC7B,SAAS,CAAC,oBAAoB,GAC9B,QAAQ,CAAC,iBAAiB,GAC1B,OAAO,CAAC,mBAAmB,GAC3B,OAAO,CAAC,wBAAwB,GAChC,MAAM,CAAC,uBAAuB,GAC9B,OAAO,CAAC,mBAAmB,GAC3B,MAAM,CAAC,sCAAsC,GAC7C,OAAO,CAAC,kDAAkD,CAC3D;AAEL,+BAA+B;AAC/B,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IACrE,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC1D,yBAAyB;IACzB,IAAI,EAAE,WAAW,CAAC;CACrB"}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./style.scss";
 import { DropdownProps } from "../../dropdown";
 /** Dropdown component */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAKtB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,yBAAyB;AACzB,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/component/index.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAKtB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,yBAAyB;AACzB,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/dropdown/component/style.scss

@@ -17,7 +17,7 @@
         }
     }
 
-    &__label {
+    label#{&}__label {
         cursor: pointer;
         user-select: none;
         display: flex;
@@ -84,7 +84,7 @@
     }
 
     &.is-active {
-        .bbr-dropdown__label .bbr-icon.bi-arrow-down::before {
+        label.bbr-dropdown__label .bbr-icon.bi-arrow-down::before {
             transform: rotate(180deg);
         }
     }
@@ -104,7 +104,7 @@
     }
 
     &--disabled {
-        .bbr-dropdown__label {
+        label.bbr-dropdown__label {
             background-color: hsl(0deg, 0%, 96%);
             border-color: hsl(0deg, 0%, 96%);
             box-shadow: none;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/compact/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIzD,QAAA,MAAM,eAAe,0HAMlB,aAAa,KAAG,WAsGlB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/compact/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIzD,QAAA,MAAM,eAAe,2IAOlB,aAAa,KAAG,WA8GlB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/dropdown/components/compact/index.js

@@ -1,14 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useId, useState } from "react";
 import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { getValidationValues } from "../../../../utils";
 import { useComponentOutsideClick } from "../../../../hooks";
 import DropdownItem from "../../../dropdown/components/item";
 import DropdownLabel from "../../../dropdown/components/label";
-const DropdownCompact = ({ items, value, onSelect, deselectable, className, hideOnOuterClick, listMaxHeight, placeholder, compact, disabled, }) => {
+const DropdownCompact = ({ items, value, onSelect, deselectable = false, className, hideOnOuterClick, listMaxHeight, placeholder, compact = false, disabled = false, validationState, }) => {
     const id = useId();
     const [isListVisible, setListVisible] = useState(false);
     const onItemClick = useCallback((event) => {
-        if (disabled ?? false) {
+        if (disabled) {
             return;
         }
         const target = event.target;
@@ -16,7 +17,7 @@ const DropdownCompact = ({ items, value, onSelect, deselectable, className, hide
             return;
         }
         const dataValue = target.dataset["dropdownItemValue"];
-        if (isNullOrEmpty(dataValue)) {
+        if (isNullOrUndefined(dataValue)) {
             return;
         }
         const item = items.find(x => x.value === dataValue);
@@ -31,7 +32,7 @@ const DropdownCompact = ({ items, value, onSelect, deselectable, className, hide
         setListVisible(false);
     }, [setListVisible, value, items, onSelect, disabled]);
     const onLabelClick = useCallback((event) => {
-        if (disabled ?? false) {
+        if (disabled) {
             return;
         }
         const target = event.target;
@@ -46,17 +47,19 @@ const DropdownCompact = ({ items, value, onSelect, deselectable, className, hide
         }
     }, [onSelect, setListVisible, disabled]);
     useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
     const classNames = getClassName([
         "bbr-dropdown",
-        (disabled ?? false) ? "bbr-dropdown--disabled" : "",
-        (compact ?? false) ? "bbr-dropdown--compact" : "",
+        disabled ? "bbr-dropdown--disabled" : "",
+        compact ? "bbr-dropdown--compact" : "",
         isListVisible ? "is-active" : "",
         isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
         className,
-        "dropdown"
+        "dropdown",
     ]);
-    return (_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { caption: placeholder, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _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));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { selectedItem: value, caption: placeholder, onClick: onLabelClick, className: styleClassName, deselectable: deselectable }), _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, onClick: onItemClick, selected: value?.value === item.value }, 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") })] }));
 };
 export default DropdownCompact;

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

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { DropdownProps } from "../../../dropdown";
-declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder, disabled }: DropdownProps) => JSX.Element;
+declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder, disabled, }: 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,wIAOpB,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":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIzD,QAAA,MAAM,iBAAiB,yIAOpB,aAAa,KAAG,WAoLlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -5,12 +5,12 @@ import { getValidationValues } 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, className, hideOnOuterClick, listMaxHeight, label, placeholder, disabled }) => {
+const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectable = false, className, hideOnOuterClick, listMaxHeight, label, placeholder, disabled = false, }) => {
     const id = useId();
     const [isListVisible, setListVisible] = useState(false);
     const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
     const onItemClick = useCallback((event) => {
-        if (disabled ?? false) {
+        if (disabled) {
             return;
         }
         const target = event.target;
@@ -33,7 +33,7 @@ const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectab
         setListVisible(false);
     }, [setListVisible, value, items, onSelect, disabled]);
     const onLabelClick = useCallback((event) => {
-        if (disabled ?? false) {
+        if (disabled) {
             return;
         }
         const target = event.target;
@@ -50,7 +50,7 @@ const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectab
     useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
     const classNames = getClassName([
         "bbr-dropdown",
-        (disabled ?? false) ? "bbr-dropdown--disabled" : "",
+        disabled ? "bbr-dropdown--disabled" : "",
         isListVisible ? "is-active" : "",
         isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
         className,
@@ -70,12 +70,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 === true, 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, children: [_jsx(DropdownLabel, { className: styleClassName, caption: placeholder, deselectable: deselectable, selectedItem: value, onClick: onLabelClick }), _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") })] }) })] }));
     }
-    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 === true, 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, children: [_jsx(DropdownLabel, { className: styleClassName, caption: placeholder, deselectable: deselectable, selectedItem: value, onClick: onLabelClick }), _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") })] }));

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

@@ -4,5 +4,5 @@ import { PaginatorProps } from "../../paginator";
  * Paginator component.
  * Used for visualization of paging configuration
 */
-export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, nearPagesCount }: PaginatorProps): JSX.Element;
+export default function Paginator({ count, onPageChange, currentPage, position, size, className, rounded, showNextButtons, nearPagesCount }: 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,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAClC,eAAe,EAAE,cAAc,EAClC,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA4G9B"}
+{"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"}

package/components/paginator/component/index.js

@@ -6,7 +6,7 @@ import { generatePageNumbers } from "../../paginator";
  * Paginator component.
  * Used for visualization of paging configuration
 */
-export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, nearPagesCount }) {
+export default function Paginator({ count, onPageChange, currentPage, position, size, className, rounded = false, showNextButtons = false, nearPagesCount }) {
     const page = currentPage || 0;
     const pageChange = useCallback((event) => {
         const target = event.target;
@@ -29,11 +29,11 @@ export default function Paginator({ count, onPageChange, currentPage, position,
         "bbr-paginator",
         "pagination",
         paginationPositionToClassMap.has(position || "") ? paginationPositionToClassMap.get(position || "") : "",
-        rounded == true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         isNullOrEmpty(size) ? "" : `is-${size}`,
         className
     ]);
-    return (_jsxs("nav", { className: classNames, role: "navigation", "aria-label": "pagination", children: [showNextButtons === true &&
+    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) &&
                         _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 }) })] })] })] }));

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import "./style.scss";
 import { CheckBoxProps } from "../../checkbox";
 /** Boolean input component */
-declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, }: CheckBoxProps) => JSX.Element;
+declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, size, style, rounded, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, }: 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,6JAMX,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":"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"}

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

@@ -3,21 +3,21 @@ import { useCallback } from "react";
 import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
 import "./style.scss";
 /** Boolean input component */
-const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, }) => {
+const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, size, style, rounded = false, block = false, withoutBorder = false, hasBackgroundColor = false, fixBackgroundColor = false, isFormLabel = false, }) => {
     const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
     const id = name || generateGuid();
     const className = getClassName([
         "is-checkradio",
         "m-check-radio",
-        (hasBackgroundColor ?? false) ? "has-background-color" : "",
-        (fixBackgroundColor ?? false) && (hasBackgroundColor ?? false) ? "m-has-background-color" : "",
+        hasBackgroundColor ? "has-background-color" : "",
+        fixBackgroundColor && hasBackgroundColor ? "m-has-background-color" : "",
         isNullOrUndefined(size) ? "" : size === "normal" ? "" : `is-${size}`,
-        (rounded ?? false) ? "is-circle" : "",
+        rounded ? "is-circle" : "",
         isNullOrUndefined(style) ? "" : `is-${style}`,
-        (block ?? false) ? "is-block" : "",
-        (withoutBorder ?? false) ? "has-no-border" : "",
+        block ? "is-block" : "",
+        withoutBorder ? "has-no-border" : "",
     ]);
-    if (!isNullOrUndefined(label) && isFormLabel === true) {
+    if (!isNullOrUndefined(label) && isFormLabel) {
         const labelClassName = getClassName([
             "label",
             label.className

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

@@ -1,6 +1,6 @@
 import { BaseInputElementProps } from "../..";
 /** Checkbox component props type */
-export interface CheckBoxProps extends BaseInputElementProps<boolean> {
+export interface CheckBoxProps extends Omit<BaseInputElementProps<boolean>, "readonly" | "validationState" | "loading" | "placeholder"> {
     /** 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,qBAAqB,CAAC,OAAO,CAAC;IACjE,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;MAGE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;MAIE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;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,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"}

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

@@ -0,0 +1,6 @@
+import "./style.scss";
+import { ColorPickerProps } from "..";
+/** Color picker component */
+declare const ColorPicker: (props: ColorPickerProps) => JSX.Element;
+export default ColorPicker;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrUndefined } from "@bodynarf/utils";
+import "./style.scss";
+import ColorPickerWithoutLabel from "../components/withoutLabel";
+import ColorPickerWithLabel from "../components/withLabel";
+/** Color picker component */
+const ColorPicker = (props) => isNullOrUndefined(props.label)
+    ? _jsx(ColorPickerWithoutLabel, { ...props })
+    : _jsx(ColorPickerWithLabel, { ...props });
+export default ColorPicker;

package/components/primitives/color/component/style.scss

@@ -0,0 +1,21 @@
+.bbr-color-picker {
+    input[type="color"]:not([disabled]) {
+        cursor: pointer;
+    }
+
+    &__preview {
+        --color-picker__background-color: transparent;
+        --color-picker__color: black;
+
+        transition: 0.15s ease-in-out;
+        transition-property: background-color, color;
+
+        background-color: var(--color-picker__background-color) !important;
+        color: var(--color-picker__color) !important;
+
+        &:focus {
+            box-shadow: none !important;
+            border-color: hsl(0, 0%, 86%) !important;
+        }
+    }
+}

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

@@ -0,0 +1,37 @@
+import { ChangeEvent } from "react";
+/** Color picker control container props */
+export interface ColorPickerControlProps {
+    /** Class names of control container */
+    containerClassName: string;
+    /** Class names of control */
+    className: string;
+    /** Default value for color control */
+    defaultColor: 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;
+    /**
+     * Show text with color preview.
+     * If set - outlined button-like element on the right will be rendered
+     */
+    showPreview?: boolean;
+    /** Title */
+    title?: string;
+}
+/** Color picker container component */
+declare const ColorPickerControl: ({ containerClassName, className, disabled, showPreview, defaultColor, onValueChange, value, id, title, dataAttributes, isValidationDefined, validationMessages, styleClassName, }: ColorPickerControlProps) => JSX.Element;
+export default ColorPickerControl;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;AAMpC,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;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,uCAAuC;AACvC,QAAA,MAAM,kBAAkB,sLAOrB,uBAAuB,KAAG,WAyD5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getFontColorFromString } from "@bodynarf/utils";
+/** Color picker container component */
+const ColorPickerControl = ({ containerClassName, className, disabled, showPreview, defaultColor, onValueChange, value, id, title, dataAttributes, isValidationDefined, validationMessages, styleClassName, }) => {
+    const color = getFontColorFromString(value);
+    if (showPreview) {
+        return (_jsxs("div", { className: "columns", 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 }) }), _jsx("div", { className: "column is-2", children: _jsx("button", { className: "bbr-color-picker__preview button is-outlined", 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") })] }));
+    }
+    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") })] }));
+};
+export default ColorPickerControl;

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

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

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

@@ -0,0 +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,WAAW,EACX,IAAI,EACJ,YAAY,EAAE,eAAe,EAC7B,aAAa,EACb,IAAI,EACJ,QAAgB,EAAE,OAAe,EACjC,KAAK,GACR,EAAE,gBAAgB,eAiHlB;AAED,eAAe,oBAAoB,CAAC"}