@bodynarf/react.components 1.12.6 → 1.13.1

package/components/table/types.d.ts

@@ -1,53 +1,53 @@
-/// <reference types="react" />
-import { BaseElementProps } from "../../types";
-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;
-}
-/** 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;
-}
+import { ReactNode } from "react";
+import { BaseElementProps } from "../../types";
+export interface TableHeading {
+    /** Caption to display */
+    caption: string;
+    /** Is column sortable  */
+    sortable: boolean;
+    /** Class names */
+    className?: string;
+    /** Name of model column*/
+    name?: string;
+}
+/** Generic sort column model */
+export interface SortColumn {
+    /** Column name */
+    columnName: string;
+    /** Is column sorted ascending */
+    ascending: boolean;
+}
+/** Table props type */
+export type TableProps = BaseElementProps & {
+    /** Header row */
+    headings: Array<TableHeading>;
+    /** Table body */
+    children: 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;
+    /** Header click handler */
+    onHeaderClick?: (columnName: TableHeading) => void;
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/table/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,WAAW,YAAY,CAAC,KAAK;IAC/B,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAElB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,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;AAED,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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,WAAW,YAAY;IACzB,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAElB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,gCAAgC;AAChC,MAAM,WAAW,UAAU;IACvB,kBAAkB;IAClB,UAAU,EAAE,MAAM,CAAC;IAEnB,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;CACtB;AAED,uBAAuB;AACvB,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG;IACxC,iBAAiB;IACjB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAE9B,iBAAiB;IACjB,QAAQ,EAAE,SAAS,CAAC;IAEpB,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;IAE/B,2BAA2B;IAC3B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,KAAK,IAAI,CAAC;CACtD,CAAC"}

package/components/table/types.js

@@ -1 +1 @@
-export {};
+export {};

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

@@ -1,10 +1,10 @@
-import { FC } from "react";
-import "./style.scss";
-import { TabsProps } from "..";
-/**
- * Tabs panel
- * @throws Items are empty
- */
-declare const Tabs: FC<TabsProps>;
-export default Tabs;
+import { FC } from "react";
+import "./style.scss";
+import { TabsProps } from "..";
+/**
+ * Tabs panel
+ * @throws Items are empty
+ */
+declare const Tabs: FC<TabsProps>;
+export default Tabs;
 //# sourceMappingURL=index.d.ts.map

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":"AAAA,OAAO,EAAwD,EAAE,EAAE,MAAM,OAAO,CAAC;AAOjF,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAW,SAAS,EAAa,MAAM,IAAI,CAAC;AAUnD;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAsFvB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwD,EAAE,EAAE,MAAM,OAAO,CAAC;AAOjF,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAW,SAAS,EAAa,MAAM,IAAI,CAAC;AAGnD;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAsFvB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/tabs/component/index.js

@@ -1,74 +1,68 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState, useEffect, useRef } from "react";
-import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementPosition, ElementSize } from "../../../types";
-import { mapDataAttributes } from "../../../utils";
-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 = ElementPosition.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);
-    const isFirstRun = useRef(true);
-    const onTabsClick = useCallback((event) => {
-        const closestTab = event.target.closest(".bbr-tabs__tab");
-        if (isNullOrUndefined(closestTab)) {
-            return;
-        }
-        const itemId = closestTab.attributes.getNamedItem("data-item-id")?.value ?? "";
-        if (isNullOrEmpty(itemId)) {
-            return;
-        }
-        const item = items.find(({ id }) => id === itemId);
-        if (isNullOrUndefined(item) || item === activeItem) {
-            return;
-        }
-        setActiveItem(item);
-    }, [activeItem, items]);
-    useEffect(() => {
-        if (isFirstRun.current) {
-            isFirstRun.current = false;
-            return;
-        }
-        onActiveItemChange(activeItem);
-    }, [activeItem, onActiveItemChange]);
-    const elClassName = getClassName([
-        "bbr-tabs",
-        "tabs",
-        className,
-        positionToClassNameMap.get(position),
-        getSizeClassName(size, [ElementSize.Normal]),
-        style,
-        fullWidth ? "is-fullwidth" : "",
-    ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsx("nav", { className: elClassName, title: title, ...dataAttributes, onClick: onTabsClick, children: _jsx("ul", { children: items.map(item => _jsx(TabItemComponent, { item: item, activeItem: activeItem.id }, item.id)) }) }));
-};
-export default Tabs;
-/**
- * Get class name for specified size and constraints
- * @param size Component size
- * @param notAllowedSizes Sizes that not applicable to component
- * @returns Class name for react element
- */
-const getSizeClassName = (size, notAllowedSizes) => {
-    notAllowedSizes ??= [];
-    if (isNullOrUndefined(size) || notAllowedSizes.includes(size)) {
-        return "";
-    }
-    return `is-${size}`;
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState, useEffect, useRef } from "react";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementPosition, ElementSize } from "../../../types";
+import { getPositionClassName, mapDataAttributes } from "../../../utils";
+import "./style.scss";
+import { TabsStyle } from "..";
+import TabItemComponent from "../components/item";
+/**
+ * Tabs panel
+ * @throws Items are empty
+ */
+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");
+    }
+    const [activeItem, setActiveItem] = useState(defaultActive);
+    const isFirstRun = useRef(true);
+    const onTabsClick = useCallback((event) => {
+        const closestTab = event.target.closest(".bbr-tabs__tab");
+        if (isNullOrUndefined(closestTab)) {
+            return;
+        }
+        const itemId = closestTab.attributes.getNamedItem("data-item-id")?.value ?? "";
+        if (isNullOrEmpty(itemId)) {
+            return;
+        }
+        const item = items.find(({ id }) => id === itemId);
+        if (isNullOrUndefined(item) || item === activeItem) {
+            return;
+        }
+        setActiveItem(item);
+    }, [activeItem, items]);
+    useEffect(() => {
+        if (isFirstRun.current) {
+            isFirstRun.current = false;
+            return;
+        }
+        onActiveItemChange(activeItem);
+    }, [activeItem, onActiveItemChange]);
+    const elClassName = getClassName([
+        "bbr-tabs",
+        "tabs",
+        className,
+        getPositionClassName(position),
+        getSizeClassName(size, [ElementSize.Normal]),
+        style,
+        fullWidth ? "is-fullwidth" : "",
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsx("nav", { className: elClassName, title: title, ...dataAttributes, onClick: onTabsClick, children: _jsx("ul", { children: items.map(item => _jsx(TabItemComponent, { item: item, activeItem: activeItem.id }, item.id)) }) }));
+};
+export default Tabs;
+/**
+ * Get class name for specified size and constraints
+ * @param size Component size
+ * @param notAllowedSizes Sizes that not applicable to component
+ * @returns Class name for react element
+ */
+const getSizeClassName = (size, notAllowedSizes) => {
+    notAllowedSizes ??= [];
+    if (isNullOrUndefined(size) || notAllowedSizes.includes(size)) {
+        return "";
+    }
+    return `is-${size}`;
+};

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

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-import { TabItem as Item } from "../..";
-/** Tabs panel single tab item component props type */
-export interface TabItemProps {
-    /** Tab item */
-    item: Item;
-    /** Active item identifier */
-    activeItem: string;
-}
-/** Tabs panel single tab item component */
-declare const TabItem: ({ item, activeItem }: TabItemProps) => JSX.Element;
-export default TabItem;
+import { FC } from "react";
+import { TabItem as Item } from "../..";
+/** Tabs panel single tab item component props type */
+export type TabItemProps = {
+    /** Tab item */
+    item: Item;
+    /** Active item identifier */
+    activeItem: string;
+};
+/** Tabs panel single tab item component */
+declare const TabItem: FC<TabItemProps>;
+export default TabItem;
 //# sourceMappingURL=index.d.ts.map

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":";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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/components/item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,OAAO,CAAC;AAExC,sDAAsD;AACtD,MAAM,MAAM,YAAY,GAAG;IACvB,eAAe;IACf,IAAI,EAAE,IAAI,CAAC;IAEX,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,2CAA2C;AAC3C,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA4B7B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/components/tabs/components/item/index.js

@@ -1,28 +1,29 @@
-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 }) => {
-    if (!isNullOrUndefined(item.icon)) {
-        return _jsx(TabItemWithIcon, { item: item, activeItem: activeItem });
-    }
-    const className = getClassName([
-        "bbr-tabs__tab",
-        activeItem === item.id ? "is-active" : undefined,
-    ]);
-    return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsx("a", { children: item.caption }) }, item.id));
-};
-export default TabItem;
-/** Tabs panel single tab item with icon component */
-const TabItemWithIcon = ({ item, activeItem }) => {
-    const iconConfig = item.icon;
-    const className = getClassName([
-        "bbr-tabs__tab",
-        activeItem === item.id ? "is-active" : undefined,
-    ]);
-    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(Icon, { ...iconConfig }), _jsx("span", { children: item.caption })] }) }, item.id));
-};
+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 }) => {
+    if (!isNullOrUndefined(item.icon)) {
+        return (_jsx(TabItemWithIcon, { item: item, activeItem: activeItem }));
+    }
+    const className = getClassName([
+        "bbr-tabs__tab",
+        activeItem === item.id ? "is-active" : undefined,
+    ]);
+    return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsx("a", { children: item.caption }) }, item.id));
+};
+export default TabItem;
+/** Tabs panel single tab item with icon component */
+// eslint-disable-next-line react/no-multi-comp
+const TabItemWithIcon = ({ item, activeItem }) => {
+    const iconConfig = item.icon;
+    const className = getClassName([
+        "bbr-tabs__tab",
+        activeItem === item.id ? "is-active" : undefined,
+    ]);
+    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(Icon, { ...iconConfig }), _jsx("span", { children: item.caption })] }) }, item.id));
+};

package/components/tabs/index.d.ts

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

package/components/tabs/index.js

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

package/components/tabs/types.d.ts

@@ -1,55 +1,55 @@
-import { BaseElementProps, ElementIcon, ElementPosition, ElementSize } from "../../types";
-/** Tabs component style */
-export declare enum TabsStyle {
-    /**
-     * Default style.
-     * Single border at the bottom
-     */
-    default = "",
-    /**
-     * Classic style with borders.
-     * Borders all except bottom
-     */
-    boxed = "is-boxed",
-    /**
-     * Styled as buttons
-     */
-    radioButton = "is-toggle",
-    /**
-     * Styled as rounded buttons
-     */
-    radioButtonRounded = "is-toggle is-toggle-rounded"
-}
-/** Tab item */
-export interface TabItem {
-    /** Unique identifier across all tab items */
-    id: string;
-    /** Displayable caption */
-    caption: string;
-    /** Icon configuration */
-    icon?: ElementIcon;
-}
-/** Tabs component props type */
-export interface TabsProps extends BaseElementProps {
-    /** Tabs */
-    items: Array<TabItem>;
-    /** Handler of changing current active item */
-    onActiveItemChange: (item: TabItem) => void;
-    /**
-     * Active item by default.
-     * If not set - first item will be active
-     */
-    defaultActive?: TabItem;
-    /**
-     * Component size.
-     * Default is `normal`
-     */
-    size?: ElementSize;
-    /** Component position */
-    position?: ElementPosition;
-    /** Component style */
-    style?: TabsStyle;
-    /** Is component tabs should take all width of parent */
-    fullWidth?: boolean;
-}
+import { BaseElementProps, ElementIcon, ElementPosition, ElementSize } from "../../types";
+/** Tabs component style */
+export declare enum TabsStyle {
+    /**
+     * Default style.
+     * Single border at the bottom
+     */
+    default = "",
+    /**
+     * Classic style with borders.
+     * Borders all except bottom
+     */
+    boxed = "is-boxed",
+    /**
+     * Styled as buttons
+     */
+    radioButton = "is-toggle",
+    /**
+     * Styled as rounded buttons
+     */
+    radioButtonRounded = "is-toggle is-toggle-rounded"
+}
+/** Tab item */
+export interface TabItem {
+    /** Unique identifier across all tab items */
+    id: string;
+    /** Displayable caption */
+    caption: string;
+    /** Icon configuration */
+    icon?: ElementIcon;
+}
+/** Tabs component props type */
+export interface TabsProps extends BaseElementProps {
+    /** Tabs */
+    items: Array<TabItem>;
+    /** Handler of changing current active item */
+    onActiveItemChange: (item: TabItem) => void;
+    /**
+     * Active item by default.
+     * If not set - first item will be active
+     */
+    defaultActive?: TabItem;
+    /**
+     * Component size.
+     * Default is `normal`
+     */
+    size?: ElementSize;
+    /** Component position */
+    position?: ElementPosition;
+    /** Component style */
+    style?: TabsStyle;
+    /** Is component tabs should take all width of parent */
+    fullWidth?: boolean;
+}
 //# sourceMappingURL=types.d.ts.map

package/components/tabs/types.js

@@ -1,22 +1,22 @@
-/** Tabs component style */
-export var TabsStyle;
-(function (TabsStyle) {
-    /**
-     * Default style.
-     * Single border at the bottom
-     */
-    TabsStyle["default"] = "";
-    /**
-     * Classic style with borders.
-     * Borders all except bottom
-     */
-    TabsStyle["boxed"] = "is-boxed";
-    /**
-     * Styled as buttons
-     */
-    TabsStyle["radioButton"] = "is-toggle";
-    /**
-     * Styled as rounded buttons
-     */
-    TabsStyle["radioButtonRounded"] = "is-toggle is-toggle-rounded";
-})(TabsStyle || (TabsStyle = {}));
+/** Tabs component style */
+export var TabsStyle;
+(function (TabsStyle) {
+    /**
+     * Default style.
+     * Single border at the bottom
+     */
+    TabsStyle["default"] = "";
+    /**
+     * Classic style with borders.
+     * Borders all except bottom
+     */
+    TabsStyle["boxed"] = "is-boxed";
+    /**
+     * Styled as buttons
+     */
+    TabsStyle["radioButton"] = "is-toggle";
+    /**
+     * Styled as rounded buttons
+     */
+    TabsStyle["radioButtonRounded"] = "is-toggle is-toggle-rounded";
+})(TabsStyle || (TabsStyle = {}));

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { TagProps } from "..";
-import "./style.scss";
-/** Single tag item */
-declare const Tag: ({ content, size, style, rounded, lightColor, customColor, onClick, className, title, data, }: TagProps) => JSX.Element;
-export default Tag;
+import { FC } from "react";
+import { TagProps } from "..";
+import "./style.scss";
+/** Single tag item */
+declare const Tag: FC<TagProps>;
+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":";AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AAE9B,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,iGAON,QAAQ,KAAG,WAuCb,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AAE9B,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CA+CrB,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/components/tag/component/index.js

@@ -1,32 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
-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, 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 ? "" : `is-${size}`,
-        isNullOrUndefined(onClick) ? "" : "bbr-tag--clickable",
-    ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsx("span", { className: elClassName, style: isNullOrUndefined(customColor)
-            ? undefined
-            : {
-                color: customColor?.color,
-                backgroundColor: customColor?.backgroundColor,
-            }, title: title, onClick: onClick, ...dataAttributes, children: content }));
-};
-export default Tag;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+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, 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 ? "" : `is-${size}`,
+        isNullOrUndefined(onClick) ? "" : "bbr-tag--clickable",
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsx("span", { className: elClassName, style: isNullOrUndefined(customColor)
+            ? undefined
+            : {
+                color: customColor?.color,
+                backgroundColor: customColor?.backgroundColor,
+            }, title: title, onClick: onClick, ...dataAttributes, children: content }));
+};
+export default Tag;