@bodynarf/react.components 1.7.631 → 1.8.0

package/common.scss

@@ -0,0 +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/component/style.scss

@@ -0,0 +1,15 @@
+.bbr-anchor {
+    text-decoration: none;
+    color: inherit;
+
+    transition: 0.15s ease-in-out color;
+
+    &:not(&--unhoverable):hover {
+        text-decoration: underline;
+        color: #3273dc;
+    }
+
+    .bbr-icon {
+        transition: none;
+    }
+}

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/component/style.scss

@@ -0,0 +1,12 @@
+.bbr-button {
+    transition: 0.15s ease-in-out;
+    transition-property: background-color, border-color;
+
+    &--icon-only {
+        padding: 0.55rem !important;
+    }
+
+    &.is-warning.is-outlined:not([disabled]):hover {
+        color: #000 !important;
+    }
+}

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

@@ -0,0 +1,120 @@
+.bbr-dropdown {
+    min-width: 7.5rem;
+
+    &:not(.bbr-dropdown--compact) {
+        display: block;
+    }
+
+    &:not(.bbr-dropdown--compact) {
+        & .dropdown-menu {
+            min-width: 100%;
+        }
+    }
+
+    & .dropdown-menu {
+        & .dropdown-content {
+            overflow: auto;
+        }
+    }
+
+    label#{&}__label {
+        cursor: pointer;
+        user-select: none;
+        display: flex;
+        justify-content: flex-start;
+
+        span {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow-x: hidden;
+            max-width: 15rem;
+        }
+
+        &--default span {
+            color: gray;
+            font-style: italic;
+        }
+
+        .bbr-icon {
+            &:hover {
+                color: #0d6efd;
+            }
+
+            &.bi-arrow-down {
+                margin-left: auto;
+                &::before {
+                    transition: 0.25s ease-in-out transform;
+                }
+            }
+
+            &.bi-plus-lg::before {
+                transform: rotate(45deg);
+            }
+        }
+
+        &.is-success--md {
+            border-color: #48c78e;
+        }
+        &.is-danger--md {
+            border-color: #f14668;
+        }
+    }
+
+    &-item {
+        cursor: pointer;
+        user-select: none;
+        white-space: normal;
+
+        transition: 0.25s ease-in-out;
+        transition-property: color, background-color;
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.05);
+            color: #0a0a0a;
+        }
+        &:active {
+            background-color: rgba(0, 0, 0, 0.15);
+            color: #0a0a0a;
+        }
+
+        &.is-active {
+            background-color: #485fc7;
+            color: #fff;
+        }
+    }
+
+    &.is-active {
+        label.bbr-dropdown__label .bbr-icon.bi-arrow-down::before {
+            transform: rotate(180deg);
+        }
+    }
+
+    &--height-default {
+        .dropdown-menu .dropdown-content {
+            max-height: 15vw;
+        }
+    }
+
+    &--compact {
+        width: fit-content;
+
+        & .dropdown-menu {
+            min-width: 11.75rem;
+        }
+    }
+
+    &--disabled {
+        label.bbr-dropdown__label {
+            background-color: hsl(0deg, 0%, 96%);
+            border-color: hsl(0deg, 0%, 96%);
+            box-shadow: none;
+            color: hsl(0deg, 0%, 48%);
+
+            cursor: not-allowed;
+
+            .bbr-icon {
+                pointer-events: 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/icon/component/style.scss

@@ -0,0 +1,21 @@
+.bbr-icon {
+    transition: 0.15s ease-in-out color;
+    font-size: 1rem;
+
+    &--size-small {
+        font-size: 0.85rem;
+    }
+    &--size-medium {
+        font-size: 1.25rem;
+    }
+    &--size-large {
+        font-size: 2rem;
+    }
+
+    &--right {
+        margin-left: 0.5rem;
+    }
+    &--left {
+        margin-right: 0.5rem;
+    }
+}

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/component/style.scss

@@ -0,0 +1,10 @@
+.is-checkradio.m-check-radio[type="checkbox"] {
+    &.has-background-color.m-has-background-color:not(:checked) + label::before {
+        border-color: #dbdbdb !important;
+        background-color: transparent !important;
+    }
+    & + label::before,
+    & + label:before {
+        top: 0.125rem;
+    }
+}

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"}