@bodynarf/react.components 1.2.4 → 1.3.0

package/components/primitives/checkbox/checkbox.scss

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

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

@@ -0,0 +1,18 @@
+import './checkbox.scss';
+import { BaseInputElementProps } from "../types";
+export declare type CheckBoxProps = BaseInputElementProps<boolean> & {
+    /** Is full colored checkbox */
+    block?: boolean;
+    /** Remove the checkbox border */
+    withoutBorder?: boolean;
+    /** Checkbox has background color */
+    hasBackgroundColor?: boolean;
+    /**
+     * Set unchecked background as transparent.
+     * Only used with `hasBackgroundColor`
+    */
+    fixBackgroundColor?: boolean;
+};
+declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor }: CheckBoxProps) => JSX.Element;
+export default CheckBox;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/index.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEjD,oBAAY,aAAa,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG;IACzD,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,oCAAoC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;MAGE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,QAAQ,+IAKX,aAAa,KAAG,WAsClB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/primitives/checkbox/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import './checkbox.scss';
+const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor }) => {
+    const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
+    const id = name || generateGuid();
+    const className = getClassName([
+        "m-check-radio",
+        "is-checkradio",
+        hasBackgroundColor == true ? "has-background-color" : "",
+        fixBackgroundColor === true && hasBackgroundColor == true ? "m-has-background-color" : "",
+        isNullOrUndefined(style) ? "" : size === 'normal' ? "" : `is-${size}`,
+        rounded === true ? "is-circle" : "",
+        isNullOrUndefined(style) ? "" : `is-${style}`,
+        block === true ? "is-block" : "",
+        withoutBorder === true ? "has-no-border" : "",
+    ]);
+    return (_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, children: label?.caption })] }));
+};
+export default CheckBox;

package/components/primitives/index.d.ts

@@ -1,5 +1,6 @@
 export * from './date';
 export * from './multiline';
 export * from './text';
+export * from './checkbox';
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

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

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

package/components/primitives/index.js

@@ -1,4 +1,5 @@
 export * from './date';
 export * from './multiline';
 export * from './text';
+export * from './checkbox';
 export * from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.2.4",
+    "version": "1.3.0",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"

package/readme.md

@@ -12,6 +12,7 @@ Small library with react components based on Bulma CSS framework&nbsp; <a href="
 2. Install [Bulma](https://bulma.io/)
 3. Make sure you imported bulma styles in parent container
 4. *(Optional)* To use **Icon** component - install [Bootstrap Icons](https://icons.getbootstrap.com/) and make sure you imported these styles in parent container
+5. *(Optional)* To use **Checkbox** component - install [bulma-checkradio](https://www.npmjs.com/package/bulma-checkradio) and make sure you imported these styles in parent container
 
 ## Description
 ### Simple components
@@ -24,6 +25,7 @@ Simple react components based on html elements.
  - **Button**
  - **Icon** - *see p.4 of installation*
  - **Dropdown** - custom dropdown component, based on html div elements & css. Allows to use icon in elements
+ - **Checkbox** - (*see p.5 of installation*) Checkbox component based on [bulma-checkradio](https://wikiki.github.io/form/checkradio/1)
 
 ### Complex components
 Complex components is set of components built via combining simple components or represent complex logical component