@bodynarf/react.components 1.2.4 → 1.3.3

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,oBAAY,WAAW,GAAG;IACtB,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,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,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,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAkC9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,oBAAY,WAAW,GAAG;IACtB,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,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,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,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAgC9D"}

package/components/button/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isNullOrEmpty, isStringEmpty, isNullOrUndefined, getClassName } from '@bodynarf/utils';
+import { isNullOrEmpty, isNullOrUndefined, getClassName } from '@bodynarf/utils';
 import './button.scss';
 import { ButtonWithIcon } from './components/buttonWithIcon';
 import { SimpleButton } from './components/simpleButton';
@@ -8,8 +8,7 @@ import { SimpleButton } from './components/simpleButton';
  * @throws Caption is not defined and icon configuration is not defined at the same time
  */
 export default function Button(props) {
-    if ((isNullOrEmpty(props.caption))
-        && (isNullOrUndefined(props.icon) || isStringEmpty(props.icon?.className))) {
+    if (isNullOrEmpty(props.caption) && isNullOrUndefined(props.icon)) {
         throw new Error("No button content provided.");
     }
     const className = getClassName([

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/date/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseInputElementProps, InputLabel } from '../types';
 /** Date input conponent props type */
 export declare type DateProps = Omit<BaseInputElementProps<Date | undefined>, 'placeholder'> & {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/date/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7D,sCAAsC;AACtC,oBAAY,SAAS,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,GAAG,SAAS,CAAC,EAAE,aAAa,CAAC,GAAG;IACnF,0BAA0B;IAC1B,KAAK,EAAE,UAAU,CAAC;CACrB,CAAA;AAED,2BAA2B;AAC3B,QAAA,MAAM,UAAU,UAAW,SAAS,KAAG,WAqFtC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/date/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7D,sCAAsC;AACtC,oBAAY,SAAS,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,GAAG,SAAS,CAAC,EAAE,aAAa,CAAC,GAAG;IACnF,0BAA0B;IAC1B,KAAK,EAAE,UAAU,CAAC;CACrB,CAAA;AAED,2BAA2B;AAC3B,QAAA,MAAM,UAAU,UAAW,SAAS,KAAG,WAsGtC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/primitives/date/index.js

@@ -23,9 +23,23 @@ const DatePicker = (props) => {
     ]);
     const label = props.label;
     const defaultValue = props.defaultValue?.toISOString().split("T")[0];
+    const labelClassName = getClassName([
+        "label",
+        label.horizontal !== true ? size : "",
+        label.className
+    ]);
     if (label.horizontal === true) {
-        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: `field-label ${size}`, children: _jsx("label", { className: "label", htmlFor: id, children: label.caption }) }), _jsx("div", { className: "field-body", children: _jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: className, readOnly: props.readonly, disabled: props.disabled, defaultValue: defaultValue, onChange: onValueChange, name: id, id: id }) }) }) })] }));
+        const labelContainerClassName = getClassName([
+            "field-label",
+            size,
+            label.horizontalContainerClassName
+        ]);
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label.horizontalFieldContainerClassName
+        ]);
+        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: className, readOnly: props.readonly, disabled: props.disabled, defaultValue: defaultValue, onChange: onValueChange, name: id, id: id }) }) }) })] }));
     }
-    return (_jsxs("div", { className: "app-input field", children: [_jsx("label", { className: `label ${size}`, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: className, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue?.toLocaleDateString(), onChange: onValueChange, name: id, id: id }) })] }));
+    return (_jsxs("div", { className: "app-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: className, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue?.toLocaleDateString(), onChange: onValueChange, name: id, id: id }) })] }));
 };
 export default DatePicker;

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/components/primitives/multiline/components/multilineWithLabel/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MultilineProps } from '../..';
 /** Multiline textual input component with describing label */
 declare const MultilineWithLabel: (props: MultilineProps) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/multilineWithLabel/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,UAAW,cAAc,KAAG,WAkFnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/multilineWithLabel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,UAAW,cAAc,KAAG,WAmGnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/multiline/components/multilineWithLabel/index.js

@@ -21,9 +21,23 @@ const MultilineWithLabel = (props) => {
         (props.style || 'default') === 'default' ? '' : `is-${props.style}`
     ]);
     const label = props.label;
+    const labelClassName = getClassName([
+        "label",
+        label.horizontal !== true ? size : "",
+        label.className
+    ]);
     if (label.horizontal === true) {
-        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: `field-label ${size}`, children: _jsx("label", { className: "label", htmlFor: id, children: label.caption }) }), _jsx("div", { className: "field-body", children: _jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: className, placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id, rows: props.rows }) }) }) })] }));
+        const labelContainerClassName = getClassName([
+            "field-label",
+            size,
+            label.horizontalContainerClassName
+        ]);
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label.horizontalFieldContainerClassName
+        ]);
+        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: className, placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id, rows: props.rows }) }) }) })] }));
     }
-    return (_jsxs("div", { className: "app-input field", children: [_jsx("label", { className: `label ${size}`, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: className, placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id, rows: props.rows }) })] }));
+    return (_jsxs("div", { className: "app-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: className, placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id, rows: props.rows }) })] }));
 };
 export default MultilineWithLabel;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseInputElementProps } from '../types';
 /** Multiline textual input conponent props type */
 export declare type MultilineProps = BaseInputElementProps<string> & {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/multiline/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKjD,mDAAmD;AACnD,oBAAY,cAAc,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACzD,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wCAAwC;AACxC,QAAA,MAAM,SAAS,UAAW,cAAc,KAAG,WAQ1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/multiline/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKjD,mDAAmD;AACnD,oBAAY,cAAc,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACzD,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wCAAwC;AACxC,QAAA,MAAM,SAAS,UAAW,cAAc,KAAG,WAQ1C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/primitives/text/components/textWithLabel/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextProps } from '../..';
 /** Textual input with describing label */
 declare const TextWithLabel: (props: TextProps) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithLabel/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,UAAW,SAAS,KAAG,WAiFzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithLabel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,UAAW,SAAS,KAAG,WAkGzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/primitives/text/components/textWithLabel/index.js

@@ -20,9 +20,23 @@ const TextWithLabel = (props) => {
         (props.style || 'default') === 'default' ? '' : `is-${props.style}`
     ]);
     const label = props.label;
+    const labelClassName = getClassName([
+        "label",
+        label.horizontal !== true ? size : "",
+        label.className
+    ]);
     if (label.horizontal === true) {
-        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: `field-label ${size}`, children: _jsx("label", { className: "label", htmlFor: id, children: label.caption }) }), _jsx("div", { className: "field-body", children: _jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("input", { className: className, type: "text", placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id }) }) }) })] }));
+        const labelContainerClassName = getClassName([
+            "field-label",
+            size,
+            label.horizontalContainerClassName
+        ]);
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label.horizontalFieldContainerClassName
+        ]);
+        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", className: className, placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id }) }) }) })] }));
     }
-    return (_jsxs("div", { className: "app-input field", children: [_jsx("label", { className: `label ${size}`, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { className: className, type: "text", placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id }) })] }));
+    return (_jsxs("div", { className: "app-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", className: className, placeholder: props.placeholder, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue, onChange: onValueChange, name: id, id: id }) })] }));
 };
 export default TextWithLabel;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseInputElementProps } from '../types';
 /** Text input conponent props type */
 export declare type TextProps = BaseInputElementProps<string>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKjD,sCAAsC;AACtC,oBAAY,SAAS,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;AAEtD,8BAA8B;AAC9B,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,WAOhC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKjD,sCAAsC;AACtC,oBAAY,SAAS,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;AAEtD,8BAA8B;AAC9B,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,WAOhC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/primitives/types.d.ts

@@ -30,6 +30,12 @@ export declare type InputLabel = {
     caption: string;
     /** Should component be on same line with label */
     horizontal?: boolean;
+    /** Additional class names */
+    className?: string;
+    /** Class name for label parent container in horizontal mode */
+    horizontalContainerClassName?: string;
+    /** Class name for input parent container in horizontal mode */
+    horizontalFieldContainerClassName?: string;
 };
 /** Input component size variety */
 export declare type InputSize = 'small' | 'normal' | 'medium' | 'large';

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,2CAA2C;AAC3C,oBAAY,qBAAqB,CAAC,MAAM,IAAI,gBAAgB,GAAG;IAC3D,8EAA8E;IAC9E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,gCAAgC;AAChC,oBAAY,UAAU,GAAG;IACrB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,mCAAmC;AACnC,oBAAY,SAAS,GACf,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,OAAO,CACR;AAEL,wCAAwC;AACxC,oBAAY,UAAU,GAChB,SAAS,CAAC,yBAAyB,GACnC,SAAS,CAAC,2BAA2B,GACrC,MAAM,CAAC,yBAAyB,GAChC,MAAM,CAAC,sBAAsB,GAC7B,SAAS,CAAC,mBAAmB,GAC7B,SAAS,CAAC,oBAAoB,GAC9B,QAAQ,CAAC,iBAAiB,CAC3B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,2CAA2C;AAC3C,oBAAY,qBAAqB,CAAC,MAAM,IAAI,gBAAgB,GAAG;IAC3D,8EAA8E;IAC9E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,gCAAgC;AAChC,oBAAY,UAAU,GAAG;IACrB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+DAA+D;IAC/D,4BAA4B,CAAC,EAAE,MAAM,CAAC;IAEtC,+DAA+D;IAC/D,iCAAiC,CAAC,EAAE,MAAM,CAAC;CAC9C,CAAC;AAEF,mCAAmC;AACnC,oBAAY,SAAS,GACf,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,OAAO,CACR;AAEL,wCAAwC;AACxC,oBAAY,UAAU,GAChB,SAAS,CAAC,yBAAyB,GACnC,SAAS,CAAC,2BAA2B,GACrC,MAAM,CAAC,yBAAyB,GAChC,MAAM,CAAC,sBAAsB,GAC7B,SAAS,CAAC,mBAAmB,GAC7B,SAAS,CAAC,oBAAoB,GAC9B,QAAQ,CAAC,iBAAiB,CAC3B"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAIvB,oBAAY,WAAW,GAAG;IACtB,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;MAIE;IACF,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAErC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA+E9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAIvB,oBAAY,WAAW,GAAG;IACtB,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;MAIE;IACF,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAErC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA4E9D"}

package/components/search/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { generateGuid, getClassName, isNullOrUndefined } from '@bodynarf/utils';
+import { generateGuid, getClassName } from '@bodynarf/utils';
 import './search.scss';
 import Button from '../button';
 /** Search component */
@@ -11,9 +11,7 @@ export default function Search(props) {
     const onChange = useCallback((event) => {
         const elementValue = event.target.value;
         if (searchType === 'byTyping') {
-            const minCharsToSearch = isNullOrUndefined(props.minCharsToSearch)
-                ? 3
-                : props.minCharsToSearch;
+            const minCharsToSearch = props.minCharsToSearch || 3;
             if (elementValue.length >= minCharsToSearch) {
                 props.onSearch(elementValue);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.2.4",
+    "version": "1.3.3",
     "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,9 +25,27 @@ 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)
 
 ### Complex components
 Complex components is set of components built via combining simple components or represent complex logical component
  - **Search** - Search bar with optional button to perform search
  - **Paginator** - Pagination elements to navigate through paged list
+	Example:
+	```tsx
+		const [{ currentPage, pagesCount, onPageChange }, paginate] = usePagination(items.length, ITEMS_PER_PAGE);
+		const pageItems = useMemo(() => paginate(items), [paginate, items]);
+
+		// ...
+
+		<Paginator
+			count={pagesCount}
+			currentPage={currentPage}
+			onPageChange={onPageChange}
+		/>
+	```
  
+### Hooks
+
+ - **useComponentOutsideClick** - Attach watcher for mouse clicks and emmit event when click was outside of component
+ - **usePagination** - Create a pagination config to easily manipulate with Paginator component