@bodynarf/react.components 1.8.22 → 1.9.1

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "../../../../common.scss";
-import { TextProps } from "../../..";
+import { TextProps } from "..";
 /** Textual input component */
 declare const Text: (props: TextProps) => JSX.Element;
 export default Text;

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,IAAI,CAAC;AAI/B,8BAA8B;AAC9B,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,WAIhC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -1,15 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isNullOrUndefined } from "@bodynarf/utils";
 import "../../../../common.scss";
-import TextWithLabel from "../../text/components/textWithLabel";
-import TextWithoutLabel from "../../text/components/textWithoutLabel";
+import TextWithLabel from "../components/withLabel";
+import TextWithoutLabel from "../components/withoutLabel";
 /** Textual input component */
 const Text = (props) => {
-    if (isNullOrUndefined(props.label)) {
-        return (_jsx(TextWithoutLabel, { ...props }));
-    }
-    else {
-        return (_jsx(TextWithLabel, { ...props }));
-    }
+    return isNullOrUndefined(props.label)
+        ? _jsx(TextWithoutLabel, { ...props })
+        : _jsx(TextWithLabel, { ...props });
 };
 export default Text;

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

@@ -0,0 +1,5 @@
+import { TextProps } from "../..";
+/** Textual input with describing label */
+declare const TextWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded, loading, label, placeholder, onBlur, className, title, data, hint, }: TextProps) => JSX.Element;
+export default TextWithLabel;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined, } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import InternalHint from "../../../internal/hint";
+import ComponentWithLabel from "../../../internal/componentWithLabel";
+/** Textual input with describing label */
+const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded = false, loading = false, label, placeholder, onBlur, className, title, data, hint, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const id = name ?? generateGuid();
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded ? "is-rounded" : "",
+        getStyleClassName(style, validationState),
+        "input",
+    ]);
+    const inputContainerClassName = getClassName([
+        "control",
+        loading ? "is-loading" : "",
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs(ComponentWithLabel, { id: id, label: label, size: getValueOrDefault(size, ElementSize.Normal), children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", id: id, name: id, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+};
+export default TextWithLabel;

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

@@ -0,0 +1,5 @@
+import { TextProps } from "../..";
+/** Textual input without describing label */
+declare const TextWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded, loading, placeholder, onBlur, className, title, data, hint, }: TextProps) => JSX.Element;
+export default TextWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,kKAUnB,SAAS,KAAG,WAoDd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import InternalHint from "../../../internal/hint";
+/** Textual input without describing label */
+const TextWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded = false, loading = false, placeholder, onBlur, className, title, data, hint, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const elClassName = getClassName([
+        className,
+        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        rounded ? "is-rounded" : "",
+        getStyleClassName(style, validationState),
+        "input",
+    ]);
+    const containerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading ? "is-loading" : "",
+    ]);
+    const id = name ?? generateGuid();
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "text", id: id, name: id, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+};
+export default TextWithoutLabel;

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

@@ -1,4 +1,4 @@
-import { BaseInputElementProps } from "../..";
+import { BaseInputElementProps } from "../../../types";
 /** Text input component props type */
 export interface TextProps extends BaseInputElementProps<string> {
     /** Focus out event handler */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,sCAAsC;AACtC,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IAC5D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnD,sCAAsC;AACtC,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IAC5D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./style.scss";
-import { SearchProps } from "../../search";
+import { SearchProps } from "..";
 /** Search component */
-export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading, rounded, disabled, }: SearchProps): JSX.Element;
+export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading, rounded, disabled, className, title, data, }: SearchProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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,EACJ,SAAiB,EAAE,OAAe,EAAE,QAAQ,GAC/C,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAyE3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,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,EAE5C,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAqF3B"}

package/components/search/component/index.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { generateGuid, getClassName } from "@bodynarf/utils";
-import "./style.scss";
+import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../types";
+import { mapDataAttributes } from "../../../utils";
 import Button from "../../button";
+import "./style.scss";
 /** Search component */
-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 || "");
+export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading = false, rounded = false, disabled, className, title, data, }) {
+    const [elementName] = useState(name ?? generateGuid());
+    const [searchValue, setSearchValue] = useState(defaultValue ?? "");
     const onChange = useCallback((event) => {
         const elementValue = event.target.value;
         if (searchType === "byTyping") {
@@ -15,23 +17,27 @@ export default function Search({ searchType, onSearch, caption, name, defaultVal
         setSearchValue(elementValue);
     }, [onSearch, searchType]);
     const onSearchButtonClick = useCallback(() => onSearch(searchValue), [onSearch, searchValue]);
-    const className = getClassName([
+    const elClassName = getClassName([
         "bbr-search",
         "control",
-        `is-${(size || "normal")}`,
+        className,
+        `is-${(size ?? ElementSize.Normal)}`,
         isLoading ? "is-loading" : "",
         searchType === "byButton" ? "is-expanded" : "",
     ]);
     const inputClassName = getClassName([
         "input",
         "is-unselectable",
-        `is-${(size || "normal")}`,
+        `is-${(size ?? ElementSize.Normal)}`,
         rounded ? "is-rounded" : "",
     ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
     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, size: size }) })] }));
+        return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", name: elementName, disabled: disabled, onChange: onChange, placeholder: caption, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }), _jsx("div", { className: "control", children: _jsx(Button, { type: "info", size: size, caption: "Search", disabled: disabled, isLoading: isLoading, onClick: onSearchButtonClick }) })] }));
     }
     else {
-        return (_jsx("div", { className: className, children: _jsx("input", { type: "search", name: elementName, defaultValue: searchValue, className: inputClassName, disabled: disabled, onChange: onChange, placeholder: caption }) }));
+        return (_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", name: elementName, disabled: disabled, onChange: onChange, placeholder: caption, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }));
     }
 }

package/components/search/types.d.ts

@@ -1,6 +1,6 @@
-import { ElementSize } from "..";
+import { BaseElementProps, ElementSize } from "../../types";
 /** Search component props type */
-export interface SearchProps {
+export interface SearchProps extends BaseElementProps {
     /**
      * Search type: by typing, starts from minimum characters to search
      * or by clicking on button next to search bar.

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/search/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,kCAAkC;AAClC,MAAM,WAAW,WAAW;IACxB;;;;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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/search/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE3D,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,gBAAgB;IACjD;;;;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"}

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

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { BaseElementProps } from "../../../types";
+import "./style.scss";
+import { SortColumn, TableHeading } from "..";
+/** Table props type */
+export interface TableProps<TItem> extends BaseElementProps {
+    /** Header row */
+    headings: Array<TableHeading<TItem>>;
+    /** Table body */
+    children?: React.ReactNode;
+    /** Add border to all cells */
+    hasBorder?: boolean;
+    /** Is row hover effect active */
+    hoverable?: boolean;
+    /** Reduce space between cells */
+    narrow?: boolean;
+    /** Use all container width */
+    fullWidth?: boolean;
+    /** Is header sticks to page on scroll */
+    hasStickyHeader?: boolean;
+    /**
+     * Header has border.
+     * @description Applied only with `hasStickyHeader` sets as `true`. Adds border effect
+    */
+    headerWithBorder?: boolean;
+    /** Header has no borders */
+    headerBorderless?: boolean;
+    /**
+     * Should rows be stripped.
+     * @description Even rows will have gray background
+    */
+    zebra?: boolean;
+    /** Current sort column */
+    currentSortColumn?: SortColumn<TItem>;
+    /** Header click handler */
+    onHeaderClick?: (columnName: TableHeading<TItem>) => void;
+}
+/**
+ * Tiny table component.
+ * If no sorting is use - use `any` as generic param
+ */
+declare function Table<TItem>({ headings, hasBorder, hoverable, narrow, fullWidth, zebra, headerBorderless, hasStickyHeader, headerWithBorder, currentSortColumn, onHeaderClick, children, className, title, data, }: TableProps<TItem>): JSX.Element;
+export default Table;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAG9C,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAG9C,uBAAuB;AACvB,MAAM,WAAW,UAAU,CAAC,KAAK,CAAE,SAAQ,gBAAgB;IACvD,iBAAiB;IACjB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IAErC,iBAAiB;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yCAAyC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;MAGE;IACF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;MAGE;IACF,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAEtC,2BAA2B;IAC3B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED;;;GAGG;AACH,iBAAS,KAAK,CAAC,KAAK,EAAE,EAClB,QAAQ,EACR,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,EAChE,eAAe,EAAE,gBAAgB,EACjC,iBAAiB,EAAE,aAAa,EAChC,QAAQ,EAER,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CA4CjC;AAED,eAAe,KAAK,CAAC"}

package/components/table/component/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { mapDataAttributes } from "../../../utils";
+import "./style.scss";
+import TableHeader from "../components/heading";
+/**
+ * Tiny table component.
+ * If no sorting is use - use `any` as generic param
+ */
+function Table({ headings, hasBorder, hoverable, narrow, fullWidth, zebra, headerBorderless, hasStickyHeader, headerWithBorder, currentSortColumn, onHeaderClick, children, className, title, data, }) {
+    const elClassName = getClassName([
+        "bbr-table",
+        "table",
+        className,
+        hasBorder ? "is-bordered" : "",
+        hoverable ? "is-hoverable" : "",
+        narrow ? "is-narrow" : "",
+        fullWidth ? "is-fullwidth" : "",
+        zebra ? "is-striped" : "",
+        hasStickyHeader ? "has-sticky-header" : "",
+        headerWithBorder ? "has-borderless-header has-shadow-bordered-header" : "",
+        headerBorderless ? "has-borderless-header" : "",
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs("table", { className: elClassName, title: title, ...dataAttributes, children: [_jsx("thead", { children: _jsx("tr", { children: headings.map((heading, i) => _jsx(TableHeader, { ...heading, onClick: onHeaderClick, sortColumn: currentSortColumn }, i)) }) }), _jsx("tbody", { children: children })] }));
+}
+export default Table;

package/components/table/component/style.scss

@@ -0,0 +1,21 @@
+table.bbr-table {
+    &.has-sticky-header thead th {
+        position: sticky;
+        top: 0.125rem;
+        z-index: 1;
+    }
+
+    &.has-shadow-bordered-header thead th {
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
+    }
+
+    &.has-borderless-header {
+        thead th {
+            border: none !important;
+        }
+
+        tbody tr:nth-child(1) td {
+            border-top: none !important;
+        }
+    }
+}

package/components/table/components/heading/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { SortColumn, TableHeading } from "../../types";
+/** Table heading cell component props */
+export interface TableHeaderProps<TItem> extends TableHeading<TItem> {
+    /** Current sort column */
+    sortColumn?: SortColumn<TItem>;
+    /** Cell click handler */
+    onClick?: (column: TableHeading<TItem>) => void;
+}
+/** Table heading cell */
+declare function TableHeader<TItem>(props: TableHeaderProps<TItem>): JSX.Element;
+export default TableHeader;
+//# sourceMappingURL=index.d.ts.map

package/components/table/components/heading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/components/heading/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEvD,yCAAyC;AACzC,MAAM,WAAW,gBAAgB,CAAC,KAAK,CAAE,SAAQ,YAAY,CAAC,KAAK,CAAC;IAChE,0BAA0B;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAE/B,yBAAyB;IACzB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACnD;AAED,yBAAyB;AACzB,iBAAS,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CAkCvE;AAED,eAAe,WAAW,CAAC"}

package/components/table/components/heading/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import Icon from "../../../icon";
+/** Table heading cell */
+function TableHeader(props) {
+    const { className, caption, name, sortable, sortColumn, onClick } = props;
+    const onHeaderClick = useCallback(() => {
+        if (sortable && !isNullOrUndefined(onClick)) {
+            onClick(props);
+        }
+    }, [onClick, props, sortable]);
+    const containerClassName = getClassName([
+        className,
+        sortable ? "is-clickable" : "",
+    ]);
+    return (_jsxs("th", { onClick: onHeaderClick, className: containerClassName, children: [_jsx("span", { children: caption }), sortable && sortColumn?.columnName === name
+                &&
+                    _jsx(Icon, { className: "ml-1", name: `sort-alpha-down${sortColumn.ascending ? "" : "-alt"}` })] }));
+}
+export default TableHeader;

package/components/table/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./component";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/table/index.js

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/components/table/types.d.ts

@@ -0,0 +1,18 @@
+export interface TableHeading<TItem> {
+    /** Caption to display */
+    caption: string;
+    /** Is column sortable  */
+    sortable: boolean;
+    /** Class names */
+    className: string;
+    /** Name of model column*/
+    name?: keyof TItem;
+}
+/** Generic sort column model */
+export interface SortColumn<TModel> {
+    /** Column name */
+    columnName: keyof TModel;
+    /** Is column sorted ascending */
+    ascending: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/table/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY,CAAC,KAAK;IAC/B,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAElB,kBAAkB;IAClB,SAAS,EAAE,MAAM,CAAC;IAElB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,KAAK,CAAC;CACtB;AAED,gCAAgC;AAChC,MAAM,WAAW,UAAU,CAAC,MAAM;IAC9B,kBAAkB;IAClB,UAAU,EAAE,MAAM,MAAM,CAAC;IAEzB,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;CACtB"}

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
+import { BaseElementProps, ElementPosition, ElementSize } from "../../../types";
 import "./style.scss";
-import { BaseElementProps, ElementSize } from "../..";
-import { TabItem, TabsPosition, TabsStyle } from "../../tabs";
+import { TabItem, TabsStyle } from "..";
 /** Tabs component props type */
 export interface TabsProps extends BaseElementProps {
     /** Tabs */
@@ -19,7 +18,7 @@ export interface TabsProps extends BaseElementProps {
      */
     size?: ElementSize;
     /** Component position */
-    position?: TabsPosition;
+    position?: ElementPosition;
     /** Component style */
     style?: TabsStyle;
     /** Is component tabs should take all width of parent */

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,EAAE,gBAAgB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG5E,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAGxC,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,eAAe,CAAC;IAE3B,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AASD;;;GAGG;AACH,QAAA,MAAM,IAAI,4GAQP,SAAS,KAAG,WA8Ed,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/tabs/component/index.js

@@ -1,16 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useState, useEffect, useRef } from "react";
 import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
-import "./style.scss";
-import { ElementSize } from "../..";
+import { ElementPosition, ElementSize } from "../../../types";
 import { mapDataAttributes } from "../../../utils";
-import { TabsPosition, TabsStyle } from "../../tabs";
-import TabItemComponent from "../../tabs/components/item";
+import "./style.scss";
+import { TabsStyle } from "..";
+import TabItemComponent from "../components/item";
+/** Tab position to element class name map */
+const positionToClassNameMap = new Map([
+    [ElementPosition.Left, ""],
+    [ElementPosition.Center, "is-centered"],
+    [ElementPosition.Right, "is-right"],
+]);
 /**
  * Tabs panel
  * @throws Items are empty
  */
-const Tabs = ({ items, onActiveItemChange, defaultActive = items[0], size, position = TabsPosition.left, style = TabsStyle.default, fullWidth = false, className, title, data, }) => {
+const Tabs = ({ items, onActiveItemChange, defaultActive = items[0], size, position = ElementPosition.Left, style = TabsStyle.default, fullWidth = false, className, title, data, }) => {
     if (items.length === 0) {
         throw new Error("Invalid configuration. Tab items must be defined");
     }
@@ -41,16 +47,16 @@ const Tabs = ({ items, onActiveItemChange, defaultActive = items[0], size, posit
     const elClassName = getClassName([
         "bbr-tabs",
         "tabs",
-        position,
+        className,
+        positionToClassNameMap.get(position),
         getSizeClassName(size, [ElementSize.Normal]),
         style,
         fullWidth ? "is-fullwidth" : "",
-        className,
     ]);
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsx("nav", { className: elClassName, onClick: onTabsClick, title: title, ...dataAttributes, children: _jsx("ul", { children: items.map(item => _jsx(TabItemComponent, { item: item, activeItem: activeItem.id }, item.id)) }) }));
+    return (_jsx("nav", { onClick: onTabsClick, className: elClassName, title: title, ...dataAttributes, children: _jsx("ul", { children: items.map(item => _jsx(TabItemComponent, { item: item, activeItem: activeItem.id }, item.id)) }) }));
 };
 export default Tabs;
 /**

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

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

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":";AAKA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,OAAO,CAAC;AAExC,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/tabs/components/item/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementPosition } from "../../../../types";
 import Icon from "../../../icon";
 /** Tabs panel single tab item component */
 const TabItem = ({ item, activeItem }) => {
@@ -20,8 +21,8 @@ const TabItemWithIcon = ({ item, activeItem }) => {
         "bbr-tabs__tab",
         activeItem === item.id ? "is-active" : undefined,
     ]);
-    if (iconConfig.position === "left") {
-        return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx(Icon, { ...iconConfig }), _jsx("span", { children: item.caption })] }) }, item.id));
+    if (iconConfig.position === ElementPosition.Right) {
+        return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx("span", { children: item.caption }), _jsx(Icon, { ...iconConfig })] }) }, item.id));
     }
-    return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx("span", { children: item.caption }), _jsx(Icon, { ...iconConfig })] }) }, item.id));
+    return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx(Icon, { ...iconConfig }), _jsx("span", { children: item.caption })] }) }, item.id));
 };

package/components/tabs/types.d.ts

@@ -1,4 +1,4 @@
-import { ElementIcon } from "..";
+import { ElementIcon } from "../../types";
 /** Tabs component style */
 export declare enum TabsStyle {
     /**
@@ -20,17 +20,6 @@ export declare enum TabsStyle {
      */
     radioButtonRounded = "is-toggle is-toggle-rounded"
 }
-/**
- * Tabs items position on component
- */
-export declare enum TabsPosition {
-    /** On the left side. Default value */
-    "left" = "",
-    /** Center*/
-    "center" = "is-centered",
-    /** Pulled to right */
-    "right" = "is-right"
-}
 /** Tab item */
 export interface TabItem {
     /** Unique identifier across all tab items */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,2BAA2B;AAC3B,oBAAY,SAAS;IACjB;;;OAGG;IACH,OAAO,KAAK;IAEZ;;;OAGG;IACH,KAAK,aAAa;IAElB;;OAEG;IACH,WAAW,cAAc;IAEzB;;OAEG;IACH,kBAAkB,gCAAgC;CACrD;AAED;;GAEG;AACH,oBAAY,YAAY;IACpB,sCAAsC;IACtC,MAAM,KAAK;IAEX,YAAY;IACZ,QAAQ,gBAAgB;IAExB,sBAAsB;IACtB,OAAO,aAAa;CACvB;AAED,eAAe;AACf,MAAM,WAAW,OAAO;IACpB,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IAEX,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAEhB,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,2BAA2B;AAC3B,oBAAY,SAAS;IACjB;;;OAGG;IACH,OAAO,KAAK;IAEZ;;;OAGG;IACH,KAAK,aAAa;IAElB;;OAEG;IACH,WAAW,cAAc;IAEzB;;OAEG;IACH,kBAAkB,gCAAgC;CACrD;AAED,eAAe;AACf,MAAM,WAAW,OAAO;IACpB,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IAEX,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAEhB,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB"}

package/components/tabs/types.js

@@ -20,15 +20,3 @@ export var TabsStyle;
      */
     TabsStyle["radioButtonRounded"] = "is-toggle is-toggle-rounded";
 })(TabsStyle || (TabsStyle = {}));
-/**
- * Tabs items position on component
- */
-export var TabsPosition;
-(function (TabsPosition) {
-    /** On the left side. Default value */
-    TabsPosition["left"] = "";
-    /** Center*/
-    TabsPosition["center"] = "is-centered";
-    /** Pulled to right */
-    TabsPosition["right"] = "is-right";
-})(TabsPosition || (TabsPosition = {}));

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { TagProps } from "../../tag";
+import { TagProps } from "..";
 import "./style.scss";
 /** Single tag item */
-declare const Tag: ({ content, size, style, rounded, lightColor, customColor, onClick, className, title, }: TagProps) => JSX.Element;
+declare const Tag: ({ content, size, style, rounded, lightColor, customColor, onClick, className, title, data, }: TagProps) => JSX.Element;
 export default Tag;
 //# sourceMappingURL=index.d.ts.map

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,2FAQN,QAAQ,KAAG,WA+Bb,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/component/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AAE9B,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,iGAQN,QAAQ,KAAG,WAuCb,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/components/tag/component/index.js

@@ -1,26 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementColor, ElementSize } from "../..";
+import { ElementColor, ElementSize } from "../../../types";
+import { mapDataAttributes } from "../../../utils";
 import "./style.scss";
 /** Single tag item */
-const Tag = ({ content, size = ElementSize.Normal, style = ElementColor.Default, rounded = false, lightColor = false, customColor, onClick, className, title, }) => {
+const Tag = ({ content, size = ElementSize.Normal, style = ElementColor.Default, rounded = false, lightColor = false, customColor, onClick, className, title, data, }) => {
     if (!isNullOrUndefined(customColor)) {
         style = ElementColor.Default;
     }
     const elClassName = getClassName([
         "bbr-tag",
         "tag",
+        className,
         style === ElementColor.Default ? "" : `is-${style}`,
         !isNullOrUndefined(customColor) ? "bbr-tag--custom" : "",
         lightColor && isNullOrUndefined(customColor) ? "is-light" : "",
         rounded ? "is-rounded" : "",
         size === ElementSize.Normal || size === ElementSize.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 }));
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsx("span", { onClick: onClick, className: elClassName, style: isNullOrUndefined(customColor)
+            ? undefined
+            : {
+                color: customColor?.color,
+                backgroundColor: customColor?.backgroundColor,
+            }, title: title, ...dataAttributes, children: content }));
 };
 export default Tag;