@bodynarf/react.components 1.7.631 → 1.8.0

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

@@ -4,7 +4,7 @@ import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
 import { getValidationValues } from "../../../../../utils";
 import { ElementSize } from "../../../..";
 import Icon from "../../../../icon";
-const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, label, placeholder, canShowPassword, }) => {
+const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded = false, loading = false, label, placeholder, canShowPassword = false, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [contentIsHidden, setContentIsHidden] = useState(true);
     const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
@@ -14,14 +14,14 @@ const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, cla
     const elClassName = getClassName([
         className,
         elSizeClassName,
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         styleClassName,
         "bbr-password",
         "input",
     ]);
     const inputContainerClassName = getClassName([
         "control",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
         canShowPassword ? "has-icons-right" : "",
         "bbr-password__wrapper",
     ]);

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PasswordProps } from "../../../password";
 declare const PasswordWithoutLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
 export default PasswordWithoutLabel;

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

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

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

@@ -4,7 +4,7 @@ import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
 import { ElementSize } from "../../../..";
 import { getValidationValues } from "../../../../../utils";
 import Icon from "../../../../icon";
-const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }) => {
+const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded = false, loading = false, placeholder, canShowPassword = false, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [contentIsHidden, setContentIsHidden] = useState(true);
     const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
@@ -14,7 +14,7 @@ const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name,
     const elClassName = getClassName([
         className,
         elSizeClassName,
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         styleClassName,
         "bbr-password",
         "input",
@@ -22,7 +22,7 @@ const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name,
     const containerClassName = getClassName([
         "control",
         "bbr-input",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
         canShowPassword ? "has-icons-right" : "",
         "bbr-password__wrapper",
     ]);

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

@@ -2,9 +2,9 @@ import { BaseInputElementProps } from "../..";
 /** Password component props type */
 export interface PasswordProps extends Omit<BaseInputElementProps<string>, "defaultValue" | "readonly"> {
     /**
-     * Is icon "Show password" visible.
+     * Is clickable icon "Show password" visible.
      * Will show password on click
     */
-    canShowPassword: boolean;
+    canShowPassword?: boolean;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/password/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/password/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACnG;;;MAGE;IACF,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B"}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "../../../../common.scss";
 import { TextProps } from "../../..";
 /** Textual input component */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/text/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,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/component/index.tsx"],"names":[],"mappings":"AAEA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,8BAA8B;AAC9B,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,WAOhC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextProps } from "../../../text";
 /** Textual input with describing label */
 declare const TextWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }: 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":";AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,0CAA0C;AAC1C,QAAA,MAAM,aAAa,sJAMhB,SAAS,KAAG,WAwGd,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithLabel/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,0CAA0C;AAC1C,QAAA,MAAM,aAAa,sJAOhB,SAAS,KAAG,WAwGd,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -4,7 +4,7 @@ import { generateGuid, getClassName, getValueOrDefault, } from "@bodynarf/utils"
 import { ElementSize } from "../../../..";
 import { getValidationValues } from "../../../../../utils";
 /** Textual input with describing label */
-const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }) => {
+const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded = false, loading = false, label, placeholder, onBlur, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const id = name || generateGuid();
     const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
@@ -12,13 +12,13 @@ const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, valida
     const elClassName = getClassName([
         className,
         elSizeClassName,
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         styleClassName,
         "input",
     ]);
     const inputContainerClassName = getClassName([
         "control",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
     ]);
     const labelClassName = getClassName([
         "label",

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextProps } from "../../../text";
 /** Textual input without describing label */
 declare const TextWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }: TextProps) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithoutLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,+IAMnB,SAAS,KAAG,WA6Cd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithoutLabel/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,+IAOnB,SAAS,KAAG,WA6Cd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -4,20 +4,20 @@ import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
 import { ElementSize } from "../../../..";
 import { getValidationValues } from "../../../../../utils";
 /** Textual input without describing label */
-const TextWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }) => {
+const TextWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded = false, loading = false, placeholder, onBlur, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
     const elClassName = getClassName([
         className,
         "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         styleClassName,
         "input",
     ]);
     const containerClassName = getClassName([
         "control",
         "bbr-input",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
     ]);
     const id = name || generateGuid();
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { className: elClassName, type: "text", placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAItB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAItB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAI,EAAE,YAAY,EAClB,IAAI,EACJ,SAAiB,EAAE,OAAe,EAAE,QAAQ,GAC/C,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAyE3B"}

package/components/search/component/index.js

@@ -4,7 +4,7 @@ import { generateGuid, getClassName } from "@bodynarf/utils";
 import "./style.scss";
 import Button from "../../button";
 /** Search component */
-export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading, rounded, disabled, }) {
+export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading = false, rounded = false, disabled, }) {
     const [elementName] = useState(name || generateGuid());
     const [searchValue, setSearchValue] = useState(defaultValue || "");
     const onChange = useCallback((event) => {
@@ -19,17 +19,17 @@ export default function Search({ searchType, onSearch, caption, name, defaultVal
         "bbr-search",
         "control",
         `is-${(size || "normal")}`,
-        isLoading === true ? "is-loading" : "",
+        isLoading ? "is-loading" : "",
         searchType === "byButton" ? "is-expanded" : "",
     ]);
     const inputClassName = getClassName([
         "input",
         "is-unselectable",
         `is-${(size || "normal")}`,
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
     ]);
     if (searchType === "byButton") {
-        return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: className, children: _jsx("input", { type: "search", name: elementName, defaultValue: searchValue, className: inputClassName, disabled: disabled, onChange: onChange, placeholder: caption }) }), _jsx("div", { className: "control", children: _jsx(Button, { caption: "Search", type: "info", onClick: onSearchButtonClick, isLoading: isLoading }) })] }));
+        return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: className, children: _jsx("input", { type: "search", name: elementName, defaultValue: searchValue, className: inputClassName, disabled: disabled, onChange: onChange, placeholder: caption }) }), _jsx("div", { className: "control", children: _jsx(Button, { caption: "Search", type: "info", onClick: onSearchButtonClick, isLoading: isLoading, size: size }) })] }));
     }
     else {
         return (_jsx("div", { className: className, children: _jsx("input", { type: "search", name: elementName, defaultValue: searchValue, className: inputClassName, disabled: disabled, onChange: onChange, placeholder: caption }) }));

package/components/search/component/style.scss

@@ -0,0 +1,24 @@
+.bbr-search {
+    input[type="search"] {
+        transition: 0.15s ease-out;
+        transition-property: border-color, color, background-color;
+
+        &::placeholder {
+            user-select: none;
+        }
+
+        &::-webkit-input-placeholder {
+            transition: 0.15s ease-out color;
+        }
+
+        &::-webkit-search-cancel-button {
+            cursor: pointer;
+            font-size: 1.25rem;
+        }
+    }
+
+    &.is-loading::after {
+        right: 1rem;
+        top: 0.725rem;
+    }
+}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./style.scss";
 import { BaseElementProps, ElementSize } from "../..";
 import { TabItem, TabsPosition, TabsStyle } from "../../tabs";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGhE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGxE,gCAAgC;AAChC,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C,WAAW;IACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtB,8CAA8C;IAC9C,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,QAAA,MAAM,IAAI,4GAMP,SAAS,KAAG,WA6Ed,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/component/index.tsx"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGhE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGxE,gCAAgC;AAChC,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C,WAAW;IACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtB,8CAA8C;IAC9C,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,QAAA,MAAM,IAAI,4GAMP,SAAS,KAAG,WA6Ed,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/tabs/component/index.js

@@ -10,11 +10,11 @@ import TabItemComponent from "../../tabs/components/item";
  * Tabs panel
  * @throws Items are empty
  */
-const Tabs = ({ items, onActiveItemChange, defaultActive, size, position, style, fullWidth, className, title, data, }) => {
+const Tabs = ({ items, onActiveItemChange, defaultActive = items[0], size, position = TabsPosition.left, style = TabsStyle.default, fullWidth = false, className, title, data, }) => {
     if (items.length === 0) {
         throw new Error("Invalid configuration. Tab items must be defined");
     }
-    const [activeItem, setActiveItem] = useState(defaultActive ?? items[0]);
+    const [activeItem, setActiveItem] = useState(defaultActive);
     const isFirstRun = useRef(true);
     const onTabsClick = useCallback((container) => {
         const closestTab = container.target.closest(".bbr-tabs__tab");
@@ -41,10 +41,10 @@ const Tabs = ({ items, onActiveItemChange, defaultActive, size, position, style,
     const elClassName = getClassName([
         "bbr-tabs",
         "tabs",
-        position ?? TabsPosition.left,
+        position,
         getSizeClassName(size, [ElementSize.Normal]),
-        style ?? TabsStyle.default,
-        fullWidth === true ? "is-fullwidth" : "",
+        style,
+        fullWidth ? "is-fullwidth" : "",
         className,
     ]);
     const dataAttributes = isNullOrUndefined(data)

package/components/tabs/component/style.scss

@@ -0,0 +1,12 @@
+.bbr-tabs {
+    &__tab {
+        .bbr-icon {
+            &:first-child {
+                margin-right: 0.5rem;
+            }
+            &:last-child {
+                margin-left: 0.5rem;
+            }
+        }
+    }
+}

package/components/tabs/components/item/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TabItem as Item } from "../../../tabs";
 /** Tabs panel single tab item component props type */
 export interface TabItemProps {

package/components/tabs/components/item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/components/item/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAEvD,sDAAsD;AACtD,MAAM,WAAW,YAAY;IACzB,eAAe;IACf,IAAI,EAAE,IAAI,CAAC;IAEX,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,2CAA2C;AAC3C,QAAA,MAAM,OAAO,yBAEV,YAAY,KAAG,WAqBjB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/components/item/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAEvD,sDAAsD;AACtD,MAAM,WAAW,YAAY;IACzB,eAAe;IACf,IAAI,EAAE,IAAI,CAAC;IAEX,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,2CAA2C;AAC3C,QAAA,MAAM,OAAO,yBAEV,YAAY,KAAG,WAqBjB,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TagProps } from "../../tag";
 import "./style.scss";
 /** Single tag item */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/component/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,2FAMN,QAAQ,KAAG,WAmCb,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/component/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,2FAQN,QAAQ,KAAG,WA+Bb,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/components/tag/component/index.js

@@ -3,9 +3,7 @@ import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
 import { ElementColor, ElementSize } from "../..";
 import "./style.scss";
 /** Single tag item */
-const Tag = ({ content, size, style, rounded, lightColor, customColor, onClick, className, title, }) => {
-    size ??= ElementSize.Normal;
-    style ??= ElementColor.Default;
+const Tag = ({ content, size = ElementSize.Normal, style = ElementColor.Default, rounded = false, lightColor = false, customColor, onClick, className, title, }) => {
     if (!isNullOrUndefined(customColor)) {
         style = ElementColor.Default;
     }
@@ -14,8 +12,8 @@ const Tag = ({ content, size, style, rounded, lightColor, customColor, onClick,
         "tag",
         style === ElementColor.Default ? "" : `is-${style}`,
         !isNullOrUndefined(customColor) ? "bbr-tag--custom" : "",
-        lightColor === true && isNullOrUndefined(customColor) ? "is-light" : "",
-        rounded === true ? "is-rounded" : "",
+        lightColor && isNullOrUndefined(customColor) ? "is-light" : "",
+        rounded ? "is-rounded" : "",
         size === ElementSize.Normal || size === ElementSize.Small ? "" : `is-${size}`,
         isNullOrUndefined(onClick) ? "" : "bbr-tag--clickable",
         className,

package/components/tag/component/style.scss

@@ -0,0 +1,27 @@
+.bbr-tag {
+    border: 1px solid transparent;
+    transition: border-color 0.15s ease-in-out;
+
+    &--clickable {
+        cursor: pointer;
+
+        &.is-light {
+            &:hover {
+                border-color: rgba(0, 0, 0, 0.25);
+            }
+            &:focus,
+            &:active {
+                border-color: rgba(0, 0, 0, 0.5);
+            }
+        }
+        &:not(.is-light) {
+            &:hover {
+                border-color: rgba(0, 0, 0, 0.35);
+            }
+            &:focus,
+            &:active {
+                border-color: rgba(0, 0, 0, 0.75);
+            }
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.7.631",
+    "version": "1.8.0",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -22,7 +22,9 @@
     ],
     "scripts": {
         "build": "npx tsc && tsc-alias -p tsconfig.json",
-        "transfer": "copy package.json dist && copy readme.md dist",
+        "copy_styles": "copyfiles -u 1 src/**/*.scss dist",
+        "copy_main" : "copyfiles package.json readme.md dist",
+        "transfer": "npm run copy_styles && npm run copy_main",
         "build_transfer": "npm run build && npm run transfer",
         "prepublish": "npm run build_transfer && cd dist && npm pack --dry-run",
         "publish_pkg": "npm run build_transfer && cd dist && npm publish --access=public"
@@ -30,13 +32,14 @@
     "devDependencies": {
         "@types/react": "^18.0.11",
         "@types/react-dom": "^18.0.5",
+        "copyfiles": "^2.4.1",
         "tsc-alias": "^1.8.6",
         "typescript": "^4.7.3"
     },
     "peerDependencies": {
-        "@bodynarf/utils": "^1.1.1",
+        "@bodynarf/utils": "^1.1.9",
         "bulma": "^0.9.4",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     }
-}
+}

package/readme.md

@@ -1,4 +1,4 @@
-# About
+****# About
 Small library with react components based on Bulma CSS framework&nbsp; <a href="https://bulma.io" title="Bulma css framework">
 	<img
     	src="https://bulma.io/images/made-with-bulma.png"
@@ -14,26 +14,34 @@ Small library with react components based on Bulma CSS framework&nbsp; <a href="
 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
 
+
+## Demo
+Demo of using all components can be found on https://bodynar.github.io/bodynarf.react-components/ (or open latest build in github repository)
 ## Description
+Mostly all components have root css class with `bbr-` prefix. BBR - Bodynarf Bulma React
 
-Mostly all components have root class with `bbr-` prefix. BBR - Bodynarf Bulma React
 ### Simple components
 Simple react components based on html elements.
 
- - **Date** - date input;
- - **Multiline** - multiline text input;
- - **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
+#### Controls
  - **Checkbox** - (*see p.5 of installation*) Checkbox component based on [bulma-checkradio](https://wikiki.github.io/form/checkradio)
+ - **ColorPicker** - control that allows picking color (with preview option)
+ - **Date** - date input
+ - **Multiline** - multiline text input
+ - **Number** - number input with step
+ - **Password** - single line password input (requires icon, see icon component description)
+ - **Text** - single line text input;
+
+#### Components
+ - **Anchor** - simple anchor (link) component
+ - **Button** - button that allows user to interact with system by clicking it _(assume everyone knows what is button)_
+ - **Icon** - *see p.4 of installation*
+ - **Tag** - small component stands for tag visualization
 
 ### 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
+ - **Accordion** - Collapsible container that can hide some content inside
+ - **Dropdown** - custom dropdown component, based on html div elements & css (requires icon, see icon component description)
  - **Paginator** - Pagination elements to navigate through paged list
   
 	Example:
@@ -49,8 +57,10 @@ Complex components is set of components built via combining simple components or
 			onPageChange={onPageChange}
 		/>
 	```
+ - **Search** - Search bar with optional button to perform search
+ - **Tabs** - Container for multi-content with option of switching displaying content without refreshing\scrolling page
  
 ### Hooks
 
- - **useComponentOutsideClick** - Attach watcher for mouse clicks and emmit event when click was outside of component
+ - **useComponentOutsideClick** - Attach watcher for mouse clicks and emit event when click was outside of component
  - **usePagination** - Create a pagination config to easily manipulate with Paginator component