@bodynarf/react.components 1.4.27 → 1.5.1

package/components/paginator/index.js

@@ -22,7 +22,7 @@ export default function Paginator({ count, onPageChange, currentPage, position,
     const pageNumbers = useMemo(() => generatePageNumbers(page, count, nearPagesCount), [page, count]);
     const canGoBack = useMemo(() => page > 1, [page]);
     const canGoForward = useMemo(() => page < count, [page, count]);
-    if (pageNumbers.length === 0) {
+    if (pageNumbers.length <= 1) {
         return _jsx(_Fragment, {});
     }
     const classNames = getClassName([

package/components/tag/index.d.ts

@@ -0,0 +1,32 @@
+import { InputColor, InputSize } from "../primitives";
+import { BaseElementProps } from "../types";
+import "./style.scss";
+/** Tag item prop types */
+interface TagProps extends BaseElementProps {
+    /** Tag contnet*/
+    content: string;
+    /**
+     * Element size.
+     * `Small` isn't allowed
+    */
+    size?: InputSize;
+    /** Element color */
+    style?: InputColor;
+    /** Is element with rounded border */
+    rounded?: boolean;
+    /** Is element has light color */
+    lightColor?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Manual color scheme */
+    customColor?: {
+        /** Text color */
+        color: string;
+        /** Background color */
+        backgroundColor: string;
+    };
+}
+/** Single tag item */
+declare const Tag: ({ content, size, style, rounded, lightColor, customColor, onClick, className, title, }: TagProps) => JSX.Element;
+export default Tag;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tag/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,cAAc,CAAC;AAEtB,0BAA0B;AAC1B,UAAU,QAAS,SAAQ,gBAAgB;IACvC,iBAAiB;IACjB,OAAO,EAAE,MAAM,CAAC;IAEhB;;;MAGE;IACF,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,oBAAoB;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,0BAA0B;IAC1B,WAAW,CAAC,EAAE;QACV,iBAAiB;QACjB,KAAK,EAAE,MAAM,CAAC;QAEd,uBAAuB;QACvB,eAAe,EAAE,MAAM,CAAC;KAC3B,CAAC;CACL;AAED,sBAAsB;AACtB,QAAA,MAAM,GAAG,2FAMN,QAAQ,KAAG,WAmCb,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/components/tag/index.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { InputColor, InputSize } from "../primitives";
+import "./style.scss";
+/** Single tag item */
+const Tag = ({ content, size, style, rounded, lightColor, customColor, onClick, className, title, }) => {
+    size ??= InputSize.Normal;
+    style ??= InputColor.Default;
+    if (!isNullOrUndefined(customColor)) {
+        style = InputColor.Default;
+    }
+    const elClassName = getClassName([
+        "bbr-tag",
+        "tag",
+        style === InputColor.Default ? "" : `is-${style}`,
+        !isNullOrUndefined(customColor) ? "bbr-tag--custom" : "",
+        lightColor === true && isNullOrUndefined(customColor) ? "is-light" : "",
+        rounded === true ? "is-rounded" : "",
+        size === InputSize.Normal || size === InputSize.Small ? "" : `is-${size}`,
+        isNullOrUndefined(onClick) ? "" : "bbr-tag--clickable",
+        className,
+    ]);
+    return (_jsx("span", { className: elClassName, onClick: onClick, title: title, color: customColor?.color, style: {
+            color: customColor?.color,
+            backgroundColor: customColor?.backgroundColor,
+        }, children: content }));
+};
+export default Tag;

package/components/tag/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.4.27",
+    "version": "1.5.1",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"