@bodynarf/react.components 1.4.6 → 1.4.8

package/components/anchor/anchor.scss

@@ -1,4 +1,4 @@
-.app-anchor {
+.bbr-anchor {
     text-decoration: none;
     color: inherit;
 
@@ -9,7 +9,7 @@
         color: #3273dc;
     }
 
-    .app-icon {
+    .bbr-icon {
         transition: none;
     }
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AnchorWithIconProps } from "../../types";
 /** 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,aAAa,CAAC;AAElD,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,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,KAAG,WAqChH,CAAC"}

package/components/anchor/components/anchorWithIcon/index.js

@@ -7,8 +7,8 @@ export const AnchorWithIcon = ({ href, className, onClick, caption, title, targe
     const iconClassName = isNullOrEmpty(caption)
         ? icon.className
         : iconPosition === 'left'
-            ? `${icon.className} app-icon--left`
-            : `${icon.className} app-icon--right`;
+            ? `${icon.className} bbr-icon--left`
+            : `${icon.className} bbr-icon--right`;
     if (iconPosition === 'left') {
         return (_jsxs("a", { href: href, className: className, title: title, target: target, onClick: onClick, children: [_jsx(Icon, { ...icon, className: iconClassName }), caption] }));
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/anchor/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAKvC,oBAAY,WAAW,GAAG;IACtB,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,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA2B9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/anchor/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAKvC,oBAAY,WAAW,GAAG;IACtB,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,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA6B9D"}

package/components/anchor/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isNullOrUndefined, isNullOrEmpty } from '@bodynarf/utils';
+import { isNullOrUndefined, isNullOrEmpty, getClassName } from '@bodynarf/utils';
 import './anchor.scss';
 import { SimpleAnchor } from './components/simpleAnchor';
 import { AnchorWithIcon } from './components/anchorWithIcon';
@@ -8,9 +8,11 @@ export default function Anchor(props) {
     if (isNullOrUndefined(props.caption) && isNullOrUndefined(props.icon)) {
         throw new Error("No anchor content provided");
     }
-    const className = 'app-anchor'
-        + (!isNullOrEmpty(props.className) ? ` ${props.className}` : '')
-        + (props.disableHovering === true ? ' app-anchor--unhoverable' : '');
+    const className = getClassName([
+        'bbr-anchor',
+        !isNullOrEmpty(props.className) ? ` ${props.className}` : '',
+        props.disableHovering === true ? ' bbr-anchor--unhoverable' : ''
+    ]);
     if (isNullOrUndefined(props.icon)) {
         return (_jsx(SimpleAnchor, { ...props, className: className, onClick: props.onClick }));
     }

package/components/button/button.scss

@@ -1,4 +1,4 @@
-.button {
+.bbr-button {
     transition: 0.15s ease-in-out;
     transition-property: background-color, border-color;
 

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonWithIconProps } from '../../types';
 /** Button with icon component */
 export declare const ButtonWithIcon: ({ className, disabled, onClick, caption, title, icon }: 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,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,2DAA4D,mBAAmB,KAAG,WAsC5G,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,2DAA4D,mBAAmB,KAAG,WAsC5G,CAAC"}

package/components/button/components/buttonWithIcon/index.js

@@ -7,10 +7,10 @@ export const ButtonWithIcon = ({ className, disabled, onClick, caption, title, i
     const iconClassName = isNullOrEmpty(caption)
         ? icon.className
         : iconPosition === 'left'
-            ? `${icon.className} app-icon--left`
-            : `${icon.className} app-icon--right`;
+            ? `${icon.className} bbr-icon--left`
+            : `${icon.className} bbr-icon--right`;
     className = isNullOrEmpty(caption)
-        ? `${className} button--icon-only`
+        ? `${className} bbr-button--icon-only`
         : className;
     if (iconPosition === 'left') {
         return (_jsxs("button", { className: className, disabled: disabled, onClick: onClick, title: title, children: [_jsx(Icon, { ...icon, className: iconClassName }), caption] }));

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,CAgC9D"}
+{"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"}

package/components/button/index.js

@@ -12,7 +12,9 @@ export default function Button(props) {
         throw new Error("No button content provided.");
     }
     const className = getClassName([
-        `button is-${props.type}`,
+        "button",
+        "bbr-button",
+        `is-${props.type}`,
         props.light === true ? 'is-light' : '',
         !isNullOrUndefined(props.size) ? `is-${props.size}` : '',
         props.outlined === true ? 'is-outlined' : '',

package/components/icon/icon.scss

@@ -1,4 +1,4 @@
-.app-icon {
+.bbr-icon {
     transition: 0.15s ease-in-out color;
     font-size: 1.3rem;
 

package/components/icon/index.js

@@ -11,7 +11,7 @@ const sizeToClassMap = new Map([
  */
 export default function Icon({ size = 'medium', name, className }) {
     const classNames = getClassName([
-        "app-icon",
+        "bbr-icon",
         "bi",
         `bi-${name}`,
         sizeToClassMap.has(size) ? sizeToClassMap.get(size) : "",

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

@@ -0,0 +1,4 @@
+import { PasswordProps } from "../..";
+declare const PasswordWithLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, label, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
+export default PasswordWithLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,iBAAiB,uIAMpB,aAAa,KAAG,WA8HlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/primitives/password/components/withLabel/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+import Icon from "../../../../icon";
+import { getValidationValues } from "../../../../../utils";
+import { InputSize } from "../../../";
+const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, label, placeholder, canShowPassword, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const [contentIsHidden, setContentIsHidden] = useState(true);
+    const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, InputSize.Normal));
+    const id = name || generateGuid();
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "bbr-password",
+        "input",
+    ]);
+    const inputContainerClassName = getClassName([
+        "control",
+        loading === true ? "is-loading" : "",
+        canShowPassword ? "has-icons-right" : "",
+        "bbr-password__wrapper",
+    ]);
+    const labelClassName = getClassName([
+        "label",
+        !label.horizontal ? elSizeClassName : "",
+        label.className
+    ]);
+    if (label.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            elSizeClassName,
+            label.horizontalContainerClassName
+        ]);
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label.horizontalFieldContainerClassName
+        ]);
+        return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", className: elClassName, placeholder: placeholder, disabled: disabled, onChange: onChange, name: id, id: id }), canShowPassword && !loading &&
+                                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, title: "Show password", children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash" }) })] }), 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: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", className: elClassName, placeholder: placeholder, disabled: disabled, onChange: onChange, name: id, id: id }), canShowPassword && !loading &&
+                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash" }) })] }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default PasswordWithLabel;

package/components/primitives/password/components/withoutLabel/index.d.ts

@@ -0,0 +1,4 @@
+import { PasswordProps } from "../..";
+declare const PasswordWithoutLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
+export default PasswordWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withoutLabel/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,oBAAoB,gIAMvB,aAAa,KAAG,WA0DlB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/components/primitives/password/components/withoutLabel/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+import Icon from "../../../../icon";
+import { InputSize } from "../../../types";
+import { getValidationValues } from "../../../../../utils";
+const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const [contentIsHidden, setContentIsHidden] = useState(true);
+    const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, InputSize.Normal));
+    const id = name || generateGuid();
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "bbr-password",
+        "input",
+    ]);
+    const containerClassName = getClassName([
+        "control",
+        loading === true ? "is-loading" : "",
+        canShowPassword ? "has-icons-right" : "",
+        "bbr-password__wrapper",
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", className: elClassName, placeholder: placeholder, disabled: disabled, onChange: onChange, name: id, id: id }), canShowPassword && !loading &&
+                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash" }) })] }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default PasswordWithoutLabel;

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

@@ -0,0 +1,14 @@
+import "./style.scss";
+import { BaseInputElementProps } from "../types";
+/** Password component props type */
+export interface PasswordProps extends Omit<BaseInputElementProps<string>, 'defaultValue' | 'readonly'> {
+    /**
+     * Is icon "Show password" visible.
+     * Will show password on click
+    */
+    canShowPassword: boolean;
+}
+/** Password input component */
+declare const Password: (props: PasswordProps) => JSX.Element;
+export default Password;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/password/index.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKjD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACnG;;;MAGE;IACF,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,+BAA+B;AAC/B,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/primitives/password/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrUndefined } from "@bodynarf/utils";
+import "./style.scss";
+import PasswordWithLabel from "./components/withLabel";
+import PasswordWithoutLabel from "./components/withoutLabel";
+/** Password input component */
+const Password = (props) => {
+    if (isNullOrUndefined(props.label)) {
+        return _jsx(PasswordWithoutLabel, { ...props });
+    }
+    return _jsx(PasswordWithLabel, { ...props });
+};
+export default Password;

package/components/primitives/password/style.scss

@@ -0,0 +1,16 @@
+.bbr-password {
+    &:focus ~ .icon:not(:hover) {
+        color: rgb(219, 219, 219) !important;
+    }
+
+    &__wrapper {
+        .icon {
+            pointer-events: inherit !important;
+            cursor: pointer;
+
+            &:hover {
+                color: rgb(74, 74, 74);
+            }
+        }
+    }
+}

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;AAGvB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,oBAAY,WAAW,GAAG;IACtB;;;;MAIE;IACF,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IAEpC,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,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,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,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,GACrC,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAsE3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAGvB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,oBAAY,WAAW,GAAG;IACtB;;;;MAIE;IACF,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IAEpC,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,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,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,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,GACrC,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAwE3B"}

package/components/search/index.js

@@ -16,13 +16,15 @@ export default function Search({ searchType, onSearch, caption, name, defaultVal
     }, [onSearch, searchType]);
     const onSearchButtonClick = useCallback(() => onSearch(searchValue), [onSearch, searchValue]);
     const className = getClassName([
-        'app-search control',
+        "bbr-search",
+        "control",
         `is-${(size || 'normal')}`,
         isLoading === true ? 'is-loading' : '',
         searchType === 'byButton' ? 'is-expanded' : '',
     ]);
     const inputClassName = getClassName([
-        'input is-unselectable',
+        "input",
+        "is-unselectable",
         `is-${(size || 'normal')}`,
         rounded === true ? 'is-rounded' : '',
     ]);

package/components/search/search.scss

@@ -1,4 +1,4 @@
-.app-search {
+.bbr-search {
     input[type="search"] {
         transition: 0.15s ease-out;
         transition-property: border-color, color, background-color;

package/package.json

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

package/readme.md

@@ -23,6 +23,8 @@ Simple react components based on html elements.
  - **Text**- single line text input;
  - **Anchor**
  - **Button**
+ - **Number**
+ - **Password** - single line password input (requires icon, see *p.4*)
  - **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)