@bodynarf/react.components 1.7.1 → 1.7.2

package/{dist/components → components}/primitives/types/label.d.ts

@@ -1,13 +1,14 @@
-/** Input label configuration */
-export interface InputLabel {
-    /** Label textual content to describe input requirements */
-    caption: string;
-    /** Should component be on same line with label */
-    horizontal: boolean;
-    /** Additional class names */
-    className?: string;
-    /** Class name for label parent container in horizontal mode */
-    horizontalContainerClassName?: string;
-    /** Class name for input parent container in horizontal mode */
-    horizontalFieldContainerClassName?: string;
-}
+/** Input label configuration */
+export interface InputLabel {
+    /** Label textual content to describe input requirements */
+    caption: string;
+    /** Should component be on same line with label */
+    horizontal: boolean;
+    /** Additional class names */
+    className?: string;
+    /** Class name for label parent container in horizontal mode */
+    horizontalContainerClassName?: string;
+    /** Class name for input parent container in horizontal mode */
+    horizontalFieldContainerClassName?: string;
+}
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/types/label.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,MAAM,WAAW,UAAU;IACvB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,UAAU,EAAE,OAAO,CAAC;IAEpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+DAA+D;IAC/D,4BAA4B,CAAC,EAAE,MAAM,CAAC;IAEtC,+DAA+D;IAC/D,iCAAiC,CAAC,EAAE,MAAM,CAAC;CAC9C"}

package/components/primitives/types/label.js

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

package/components/primitives/types/validation/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./status";
+export * from "./state";
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/types/validation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/types/validation/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/{dist/components/primitives/types/validation/index.d.ts → components/primitives/types/validation/index.js}

@@ -1,2 +1,2 @@
-export * from "./status";
-export * from "./state";
+export * from "./status";
+export * from "./state";

package/{dist/components → components}/primitives/types/validation/state.d.ts

@@ -1,8 +1,9 @@
-import { ValidationStatus } from "./status";
-/** Form component value validation state */
-export interface ValidationState {
-    /** Current status */
-    status: ValidationStatus;
-    /** Current status messages */
-    messages: Array<string>;
-}
+import { ValidationStatus } from "./status";
+/** Form component value validation state */
+export interface ValidationState {
+    /** Current status */
+    status: ValidationStatus;
+    /** Current status messages */
+    messages: Array<string>;
+}
+//# sourceMappingURL=state.d.ts.map

package/components/primitives/types/validation/state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/types/validation/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,4CAA4C;AAC5C,MAAM,WAAW,eAAe;IAC5B,qBAAqB;IACrB,MAAM,EAAE,gBAAgB,CAAC;IAEzB,8BAA8B;IAC9B,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAC3B"}

package/components/primitives/types/validation/state.js

@@ -0,0 +1,2 @@
+;
+export {};

package/{dist/components → components}/primitives/types/validation/status.d.ts

@@ -1,9 +1,10 @@
-/** Input component value validation status */
-export declare enum ValidationStatus {
-    /** Validation wasn"t been performed */
-    None = "none",
-    /** Value is valid */
-    Valid = "valid",
-    /** Value is invalid due some validator check */
-    Invalid = "invalid"
-}
+/** Input component value validation status */
+export declare enum ValidationStatus {
+    /** Validation wasn"t been performed */
+    None = "none",
+    /** Value is valid */
+    Valid = "valid",
+    /** Value is invalid due some validator check */
+    Invalid = "invalid"
+}
+//# sourceMappingURL=status.d.ts.map

package/components/primitives/types/validation/status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/types/validation/status.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,oBAAY,gBAAgB;IACxB,uCAAuC;IACvC,IAAI,SAAS;IAEb,qBAAqB;IACrB,KAAK,UAAU;IAEf,gDAAgD;IAChD,OAAO,YAAY;CACtB"}

package/components/primitives/types/validation/status.js

@@ -0,0 +1,11 @@
+/** Input component value validation status */
+export var ValidationStatus;
+(function (ValidationStatus) {
+    /** Validation wasn"t been performed */
+    ValidationStatus["None"] = "none";
+    /** Value is valid */
+    ValidationStatus["Valid"] = "valid";
+    /** Value is invalid due some validator check */
+    ValidationStatus["Invalid"] = "invalid";
+})(ValidationStatus || (ValidationStatus = {}));
+;

package/{dist/components → components}/search/component/index.d.ts

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

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

@@ -0,0 +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"}

package/components/search/component/index.js

@@ -0,0 +1,37 @@
+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 Button from "../../button";
+/** Search component */
+export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading, rounded, disabled, }) {
+    const [elementName] = useState(name || generateGuid());
+    const [searchValue, setSearchValue] = useState(defaultValue || "");
+    const onChange = useCallback((event) => {
+        const elementValue = event.target.value;
+        if (searchType === "byTyping") {
+            onSearch(elementValue);
+        }
+        setSearchValue(elementValue);
+    }, [onSearch, searchType]);
+    const onSearchButtonClick = useCallback(() => onSearch(searchValue), [onSearch, searchValue]);
+    const className = getClassName([
+        "bbr-search",
+        "control",
+        `is-${(size || "normal")}`,
+        isLoading === true ? "is-loading" : "",
+        searchType === "byButton" ? "is-expanded" : "",
+    ]);
+    const inputClassName = getClassName([
+        "input",
+        "is-unselectable",
+        `is-${(size || "normal")}`,
+        rounded === true ? "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 }) })] }));
+    }
+    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/index.d.ts

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

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

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

package/components/search/index.js

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

package/{dist/components → components}/search/types.d.ts

@@ -1,26 +1,27 @@
-import { ElementSize } from '../../components';
-/** Search component props type */
-export interface SearchProps {
-    /**
-     * Search type: by typing, starts from minimum characters to search
-     * or by clicking on button next to search bar.
-     * Default `is byTyping`
-    */
-    searchType: "byTyping" | "byButton";
-    /** Search caption */
-    caption: string;
-    /** Search handler */
-    onSearch: (searchPattern: string) => void;
-    /** Initial search value */
-    defaultValue?: string;
-    /** Control name. If empty - will be replaced by random guid */
-    name?: string;
-    /** Size of search bar */
-    size?: ElementSize;
-    /** Should search bar be rounded */
-    rounded?: boolean;
-    /** Is search bar disabled */
-    disabled?: boolean;
-    /** Should loading icon be displayed in search bar */
-    isLoading?: boolean;
-}
+import { ElementSize } from "..";
+/** Search component props type */
+export interface SearchProps {
+    /**
+     * Search type: by typing, starts from minimum characters to search
+     * or by clicking on button next to search bar.
+     * Default `is byTyping`
+    */
+    searchType: "byTyping" | "byButton";
+    /** Search caption */
+    caption: string;
+    /** Search handler */
+    onSearch: (searchPattern: string) => void;
+    /** Initial search value */
+    defaultValue?: string;
+    /** Control name. If empty - will be replaced by random guid */
+    name?: string;
+    /** Size of search bar */
+    size?: ElementSize;
+    /** Should search bar be rounded */
+    rounded?: boolean;
+    /** Is search bar disabled */
+    disabled?: boolean;
+    /** Should loading icon be displayed in search bar */
+    isLoading?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

package/components/search/types.js

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

package/{dist/components → components}/tabs/component/index.d.ts

@@ -1,31 +1,34 @@
-import { BaseElementProps, ElementSize } from '../../../components';
-import { TabItem, TabsPosition, TabsStyle } from '../../../components/tabs';
-/** 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?: TabsPosition;
-    /** Component style */
-    style?: TabsStyle;
-    /** Is component tabs should take all width of parent */
-    fullWidth?: boolean;
-}
-/**
- * Tabs panel
- * @throws Items are empty
- */
-declare const Tabs: ({ items, onActiveItemChange, defaultActive, size, position, style, fullWidth, className, title, data, }: TabsProps) => JSX.Element;
-export default Tabs;
+/// <reference types="react" />
+import "./style.scss";
+import { BaseElementProps, ElementSize } from "../..";
+import { TabItem, TabsPosition, TabsStyle } from "../../tabs";
+/** 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?: TabsPosition;
+    /** Component style */
+    style?: TabsStyle;
+    /** Is component tabs should take all width of parent */
+    fullWidth?: boolean;
+}
+/**
+ * Tabs panel
+ * @throws Items are empty
+ */
+declare const Tabs: ({ items, onActiveItemChange, defaultActive, size, position, style, fullWidth, className, title, data, }: TabsProps) => JSX.Element;
+export default Tabs;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/components/tabs/component/index.js

@@ -0,0 +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 "./style.scss";
+import { ElementSize } from "../..";
+import { mapDataAttributes } from "../../../utils";
+import { TabsPosition, TabsStyle } from "../../tabs";
+import TabItemComponent from "../../tabs/components/item";
+/**
+ * Tabs panel
+ * @throws Items are empty
+ */
+const Tabs = ({ items, onActiveItemChange, defaultActive, size, position, style, fullWidth, 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 isFirstRun = useRef(true);
+    const onTabsClick = useCallback((container) => {
+        const closestTab = container.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",
+        position ?? TabsPosition.left,
+        getSizeClassName(size, [ElementSize.Normal]),
+        style ?? TabsStyle.default,
+        fullWidth === true ? "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)) }) }));
+};
+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/{dist/components → components}/tabs/components/item/index.d.ts

@@ -1,11 +1,13 @@
-import { TabItem as Item } from '../../../../components/tabs';
-/** 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;
+/// <reference types="react" />
+import { TabItem as Item } from "../../../tabs";
+/** 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;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+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 === "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));
+    }
+    return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx("span", { children: item.caption }), _jsx(Icon, { ...iconConfig })] }) }, item.id));
+};

package/components/tabs/index.d.ts

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

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

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

package/components/tabs/index.js

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

package/{dist/components → components}/tabs/types.d.ts

@@ -1,42 +1,43 @@
-import { ElementIcon } from '../../components';
-/** 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"
-}
-/**
- * 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 */
-    id: string;
-    /** Displayable caption */
-    caption: string;
-    /** Icon configuration */
-    icon?: ElementIcon;
-}
+import { ElementIcon } from "..";
+/** 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"
+}
+/**
+ * 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 */
+    id: string;
+    /** Displayable caption */
+    caption: string;
+    /** Icon configuration */
+    icon?: ElementIcon;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

package/components/tabs/types.js

@@ -0,0 +1,34 @@
+/** 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 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/{dist/components → components}/tag/component/index.d.ts

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

@@ -0,0 +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"}

package/components/tag/component/index.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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;
+    if (!isNullOrUndefined(customColor)) {
+        style = ElementColor.Default;
+    }
+    const elClassName = getClassName([
+        "bbr-tag",
+        "tag",
+        style === ElementColor.Default ? "" : `is-${style}`,
+        !isNullOrUndefined(customColor) ? "bbr-tag--custom" : "",
+        lightColor === true && isNullOrUndefined(customColor) ? "is-light" : "",
+        rounded === true ? "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 }));
+};
+export default Tag;

package/components/tag/index.d.ts

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