@bodynarf/react.components 1.7.1 → 1.7.2

package/components/dropdown/components/compact/index.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useState } from "react";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { useComponentOutsideClick } from "../../../../hooks";
+import DropdownItem from "../../../dropdown/components/item";
+import DropdownLabel from "../../../dropdown/components/label";
+const DropdownCompact = ({ items, value, onSelect, deselectable, className, hideOnOuterClick, listMaxHeight, placeholder, compact, disabled, }) => {
+    const id = useId();
+    const [isListVisible, setListVisible] = useState(false);
+    const onItemClick = useCallback((event) => {
+        if (disabled ?? false) {
+            return;
+        }
+        const target = event.target;
+        if (isNullOrUndefined(target)) {
+            return;
+        }
+        const dataValue = target.dataset["dropdownItemValue"];
+        if (isNullOrEmpty(dataValue)) {
+            return;
+        }
+        const item = items.find(x => x.value === dataValue);
+        if (isNullOrUndefined(item)) {
+            return;
+        }
+        if (value === item) {
+            setListVisible(false);
+            return;
+        }
+        onSelect(item);
+        setListVisible(false);
+    }, [setListVisible, value, items, onSelect, disabled]);
+    const onLabelClick = useCallback((event) => {
+        if (disabled ?? false) {
+            return;
+        }
+        const target = event.target;
+        if (isNullOrUndefined(target)) {
+            return;
+        }
+        if (target.classList.contains("bi-plus-lg")) {
+            onSelect(undefined);
+        }
+        else {
+            setListVisible(state => !state);
+        }
+    }, [onSelect, setListVisible, disabled]);
+    useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
+    const classNames = getClassName([
+        "bbr-dropdown",
+        (disabled ?? false) ? "bbr-dropdown--disabled" : "",
+        (compact ?? false) ? "bbr-dropdown--compact" : "",
+        isListVisible ? "is-active" : "",
+        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
+        className,
+        "dropdown"
+    ]);
+    return (_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { caption: placeholder, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
+                    ? _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
+                    : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id));
+};
+export default DropdownCompact;

package/{dist/components → components}/dropdown/components/item/index.d.ts

@@ -1,13 +1,15 @@
-import { SelectableItem } from '../../../../components/dropdown';
-/** Dropdown item props */
-interface DropdownItemProps {
-    /** Item to present in dropdown */
-    item: SelectableItem;
-    /** Is item selected*/
-    selected: boolean;
-    /** Item click handler */
-    onClick: (event: React.MouseEvent<HTMLLIElement>) => void;
-}
-/** Single item in dropdown component */
-declare const DropdownItem: ({ item, selected, onClick }: DropdownItemProps) => JSX.Element;
-export default DropdownItem;
+/// <reference types="react" />
+import { SelectableItem } from "../../../dropdown";
+/** Dropdown item props */
+interface DropdownItemProps {
+    /** Item to present in dropdown */
+    item: SelectableItem;
+    /** Is item selected*/
+    selected: boolean;
+    /** Item click handler */
+    onClick: (event: React.MouseEvent<HTMLLIElement>) => void;
+}
+/** Single item in dropdown component */
+declare const DropdownItem: ({ item, selected, onClick }: DropdownItemProps) => JSX.Element;
+export default DropdownItem;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/item/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,0BAA0B;AAC1B,UAAU,iBAAiB;IACvB,kCAAkC;IAClC,IAAI,EAAE,cAAc,CAAC;IAErB,sBAAsB;IACtB,QAAQ,EAAE,OAAO,CAAC;IAElB,yBAAyB;IACzB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,wCAAwC;AACxC,QAAA,MAAM,YAAY,gCAAiC,iBAAiB,KAAG,WAYtE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/dropdown/components/item/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Single item in dropdown component */
+const DropdownItem = ({ item, selected, onClick }) => {
+    return (_jsx("li", { className: `bbr-dropdown-item dropdown-item${selected ? " is-active" : ""}`, onClick: onClick, "data-dropdown-item-value": item.value, title: item.displayValue, children: item.displayValue }, item.id));
+};
+export default DropdownItem;

package/{dist/components → components}/dropdown/components/label/index.d.ts

@@ -1,17 +1,18 @@
-import { MouseEvent } from "react";
-import { SelectableItem } from '../../../../components/dropdown';
-export interface DropdownLabelProps {
-    /** Caption when no items selected */
-    caption: string;
-    /** Can user deselect */
-    deselectable: boolean;
-    /** Selected item */
-    selectedItem?: SelectableItem;
-    /** Element classnames */
-    className?: string;
-    /** Click handler*/
-    onClick: (event: MouseEvent<HTMLLabelElement>) => void;
-}
-/** Label component */
-declare const DropdownLabel: ({ caption, selectedItem, onClick, deselectable, className, }: DropdownLabelProps) => JSX.Element;
-export default DropdownLabel;
+import { MouseEvent } from "react";
+import { SelectableItem } from "../../../dropdown";
+export interface DropdownLabelProps {
+    /** Caption when no items selected */
+    caption: string;
+    /** Can user deselect */
+    deselectable: boolean;
+    /** Selected item */
+    selectedItem?: SelectableItem;
+    /** Element classnames */
+    className?: string;
+    /** Click handler*/
+    onClick: (event: MouseEvent<HTMLLabelElement>) => void;
+}
+/** Label component */
+declare const DropdownLabel: ({ caption, selectedItem, onClick, deselectable, className, }: DropdownLabelProps) => JSX.Element;
+export default DropdownLabel;
+//# sourceMappingURL=index.d.ts.map

package/components/dropdown/components/label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOnC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,kBAAkB;IAC/B,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,iEAIhB,kBAAkB,KAAG,WAkCvB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/dropdown/components/label/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../..";
+import Icon from "../../../icon";
+/** Label component */
+const DropdownLabel = ({ caption, selectedItem, onClick, deselectable, className, }) => {
+    const itemSelected = !isNullOrUndefined(selectedItem);
+    const text = itemSelected
+        ? selectedItem?.displayValue
+        : caption;
+    const deselectVisible = deselectable && itemSelected;
+    const elClassName = getClassName([
+        "dropdown-trigger",
+        "bbr-dropdown__label",
+        isNullOrEmpty(className) ? "" : `${className}--md`,
+        itemSelected ? "" : "bbr-dropdown__label--default",
+        "button"
+    ]);
+    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [deselectVisible &&
+                _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+};
+export default DropdownLabel;

package/{dist/components → components}/dropdown/components/withLabel/index.d.ts

@@ -1,3 +1,5 @@
-import { DropdownProps } from '../../../../components/dropdown';
-declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder, disabled }: DropdownProps) => JSX.Element;
-export default DropdownWithLabel;
+/// <reference types="react" />
+import { DropdownProps } from "../../../dropdown";
+declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder, disabled }: DropdownProps) => JSX.Element;
+export default DropdownWithLabel;
+//# sourceMappingURL=index.d.ts.map

package/components/dropdown/components/withLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIzD,QAAA,MAAM,iBAAiB,wIAOpB,aAAa,KAAG,WAoLlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/dropdown/components/withLabel/index.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useState } from "react";
+import { isNullOrUndefined, isNullOrEmpty, getClassName } from "@bodynarf/utils";
+import { getValidationValues } from "../../../../utils";
+import { useComponentOutsideClick } from "../../../../hooks";
+import DropdownItem from "../../../dropdown/components/item";
+import DropdownLabel from "../../../dropdown/components/label";
+const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder, disabled }) => {
+    const id = useId();
+    const [isListVisible, setListVisible] = useState(false);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
+    const onItemClick = useCallback((event) => {
+        if (disabled ?? false) {
+            return;
+        }
+        const target = event.target;
+        if (isNullOrUndefined(target)) {
+            return;
+        }
+        const dataValue = target.dataset["dropdownItemValue"];
+        if (isNullOrEmpty(dataValue)) {
+            return;
+        }
+        const item = items.find(x => x.value === dataValue);
+        if (isNullOrUndefined(item)) {
+            return;
+        }
+        if (value === item) {
+            setListVisible(false);
+            return;
+        }
+        onSelect(item);
+        setListVisible(false);
+    }, [setListVisible, value, items, onSelect, disabled]);
+    const onLabelClick = useCallback((event) => {
+        if (disabled ?? false) {
+            return;
+        }
+        const target = event.target;
+        if (isNullOrUndefined(target)) {
+            return;
+        }
+        if (target.classList.contains("bi-plus-lg")) {
+            onSelect(undefined);
+        }
+        else {
+            setListVisible(state => !state);
+        }
+    }, [onSelect, setListVisible, disabled]);
+    useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
+    const classNames = getClassName([
+        "bbr-dropdown",
+        (disabled ?? false) ? "bbr-dropdown--disabled" : "",
+        isListVisible ? "is-active" : "",
+        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
+        className,
+        "dropdown"
+    ]);
+    const labelClassName = getClassName([
+        "label",
+        label.className
+    ]);
+    if (label.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            "is-normal",
+            label.horizontalContainerClassName
+        ]);
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label.horizontalFieldContainerClassName
+        ]);
+        return (_jsxs("div", { className: "bbr-dropdown__root-container--with-label bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { className: styleClassName, caption: placeholder, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
+                                            ? _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
+                                            : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), isValidationDefined && validationMessages.length > 0 &&
+                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
+    }
+    return (_jsxs("div", { className: "field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { className: styleClassName, caption: placeholder, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
+                            ? _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
+                            : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default DropdownWithLabel;

package/components/dropdown/index.d.ts

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

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

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

package/{dist/components/accordion/index.d.ts → components/dropdown/index.js}

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

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

@@ -1,45 +1,46 @@
-import { BaseElementProps, InputLabel, ValidationState } from '../../components';
-/** Dropdown item */
-export interface SelectableItem {
-    /** Unique item identifier */
-    id: string;
-    /** Item value */
-    value: string;
-    /** Displaying text */
-    displayValue: string;
-}
-/** Dropdown component props type */
-export interface DropdownProps extends BaseElementProps {
-    /** Items which can be selected */
-    items: Array<SelectableItem>;
-    /** Input element placeholder */
-    placeholder: string;
-    /**
-     * Action to update selected value, which stored outside
-    */
-    onSelect: (item?: SelectableItem) => void;
-    /**
-     * Selected value.
-     * Must be stored outside
-    */
-    value?: SelectableItem;
-    /** Hide dropdown list when its opened and user click outside */
-    hideOnOuterClick: boolean;
-    /** Can user deselect */
-    deselectable?: boolean;
-    /** Custom dropdown list max-height property */
-    listMaxHeight?: string;
-    /**
-     * Should dropdown be compact
-     * Will have width by maximum current selection item width
-     */
-    compact?: boolean;
-    /**
-     * Is element disabled
-     */
-    disabled?: boolean;
-    /** Label configuration */
-    label?: InputLabel;
-    /** Current validation state */
-    validationState?: ValidationState;
-}
+import { BaseElementProps, InputLabel, ValidationState } from "..";
+/** Dropdown item */
+export interface SelectableItem {
+    /** Unique item identifier */
+    id: string;
+    /** Item value */
+    value: string;
+    /** Displaying text */
+    displayValue: string;
+}
+/** Dropdown component props type */
+export interface DropdownProps extends BaseElementProps {
+    /** Items which can be selected */
+    items: Array<SelectableItem>;
+    /** Input element placeholder */
+    placeholder: string;
+    /**
+     * Action to update selected value, which stored outside
+    */
+    onSelect: (item?: SelectableItem) => void;
+    /**
+     * Selected value.
+     * Must be stored outside
+    */
+    value?: SelectableItem;
+    /** Hide dropdown list when its opened and user click outside */
+    hideOnOuterClick: boolean;
+    /** Can user deselect */
+    deselectable?: boolean;
+    /** Custom dropdown list max-height property */
+    listMaxHeight?: string;
+    /**
+     * Should dropdown be compact
+     * Will have width by maximum current selection item width
+     */
+    compact?: boolean;
+    /**
+     * Is element disabled
+     */
+    disabled?: boolean;
+    /** Label configuration */
+    label?: InputLabel;
+    /** Current validation state */
+    validationState?: ValidationState;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEhF,oBAAoB;AACpB,MAAM,WAAW,cAAc;IAC3B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,sBAAsB;IACtB,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACnD,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC"}

package/components/dropdown/types.js

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import "./style.scss";
+import { IconProps } from "../../icon";
+/**
+ * Icon component. Based on bootstrap icons
+ */
+export default function Icon({ name, size, className, }: IconProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAItB,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AASjD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EACzB,IAAI,EAAE,IAAyB,EAC/B,SAAS,GACZ,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAYzB"}

package/components/icon/component/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName } from "@bodynarf/utils";
+import "./style.scss";
+import { ElementSize } from "../..";
+const sizeToClassMap = new Map([
+    [ElementSize.Small, "bbr-icon--size-small"],
+    [ElementSize.Normal, ""],
+    [ElementSize.Medium, "bbr-icon--size-medium"],
+    [ElementSize.Large, "bbr-icon--size-large"]
+]);
+/**
+ * Icon component. Based on bootstrap icons
+ */
+export default function Icon({ name, size = ElementSize.Normal, className, }) {
+    const classNames = getClassName([
+        "bbr-icon",
+        "bi",
+        `bi-${name}`,
+        sizeToClassMap.has(size) ? sizeToClassMap.get(size) : "",
+        className
+    ]);
+    return (_jsx("i", { className: classNames }));
+}

package/components/icon/index.d.ts

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

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

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

package/components/icon/index.js

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

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

@@ -1,15 +1,16 @@
-import { ElementSize } from '../../components';
-/** Icon component props */
-export interface IconProps {
-    /**
-     * Icon name. Must be without `bi-`
-     * @example ["Arrow repeat", "arrow-repeat"]
-     * // Icon name to icon class name.
-     * // For class name check bootstrap icons website
-    */
-    name: string;
-    /** Additional classname */
-    className?: string;
-    /** Icon size */
-    size?: ElementSize;
-}
+import { ElementSize } from "..";
+/** Icon component props */
+export interface IconProps {
+    /**
+     * Icon name. Must be without `bi-`
+     * @example ["Arrow repeat", "arrow-repeat"]
+     * // Icon name to icon class name.
+     * // For class name check bootstrap icons website
+    */
+    name: string;
+    /** Additional classname */
+    className?: string;
+    /** Icon size */
+    size?: ElementSize;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,2BAA2B;AAC3B,MAAM,WAAW,SAAS;IACtB;;;;;MAKE;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB"}

package/components/icon/types.js

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

package/components/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./accordion";
+export * from "./anchor";
+export * from "./button";
+export * from "./dropdown";
+export * from "./icon";
+export * from "./paginator";
+export * from "./search";
+export * from "./tabs";
+export * from "./tag";
+export * from "./primitives";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AAEtB,cAAc,cAAc,CAAC;AAE7B,cAAc,SAAS,CAAC"}

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

@@ -1,11 +1,11 @@
-export * from "./accordion";
-export * from "./anchor";
-export * from "./button";
-export * from "./dropdown";
-export * from "./icon";
-export * from "./paginator";
-export * from "./search";
-export * from "./tabs";
-export * from "./tag";
-export * from "./primitives";
-export * from "./types";
+export * from "./accordion";
+export * from "./anchor";
+export * from "./button";
+export * from "./dropdown";
+export * from "./icon";
+export * from "./paginator";
+export * from "./search";
+export * from "./tabs";
+export * from "./tag";
+export * from "./primitives";
+export * from "./types";

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

@@ -1,6 +1,8 @@
-import { PaginatorProps } from '../../../components/paginator';
-/**
- * Paginator component.
- * Used for visualization of pagging configuration
-*/
-export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, nearPagesCount }: PaginatorProps): JSX.Element;
+/// <reference types="react" />
+import { PaginatorProps } from "../../paginator";
+/**
+ * Paginator component.
+ * Used for visualization of pagging configuration
+*/
+export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, nearPagesCount }: PaginatorProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/paginator/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAuB,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhF;;;EAGE;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,YAAY,EAAE,WAAW,EAChC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAClC,eAAe,EAAE,cAAc,EAClC,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA4G9B"}

package/components/paginator/component/index.js

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { getClassName, isNullOrEmpty } from "@bodynarf/utils";
+import { generatePageNumbers } from "../../paginator";
+/**
+ * Paginator component.
+ * Used for visualization of pagging configuration
+*/
+export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, nearPagesCount }) {
+    const page = currentPage || 0;
+    const pageChange = useCallback((event) => {
+        const target = event.target;
+        const pageRaw = target.dataset["page"];
+        if (isNullOrEmpty(pageRaw)) {
+            return;
+        }
+        const page = +pageRaw;
+        if (page !== currentPage && page > 0 && page <= count) {
+            onPageChange(page);
+        }
+    }, [onPageChange, currentPage, count]);
+    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 <= 1) {
+        return _jsx(_Fragment, {});
+    }
+    const classNames = getClassName([
+        "bbr-paginator",
+        "pagination",
+        paginationPositionToClassMap.has(position || "") ? paginationPositionToClassMap.get(position || "") : "",
+        rounded == true ? "is-rounded" : "",
+        isNullOrEmpty(size) ? "" : `is-${size}`,
+        className
+    ]);
+    return (_jsxs("nav", { className: classNames, role: "navigation", "aria-label": "pagination", children: [showNextButtons === true &&
+                _jsxs(_Fragment, { children: [_jsx("a", { className: `pagination-previous${canGoBack ? "" : " is-disabled"}`, "data-page": page - 1, onClick: pageChange, children: "Previous" }), _jsx("a", { className: `pagination-next${canGoForward ? "" : " is-disabled"}`, "data-page": page + 1, onClick: pageChange, children: "Next page" })] }), _jsxs("ul", { className: "pagination-list", children: [page !== 1 && !pageNumbers.includes(1) &&
+                        _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": "Goto page 1", "data-page": 1, onClick: pageChange, children: "1" }) }), _jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) })] }), pageNumbers.map(x => _jsx("li", { children: _jsx("a", { className: `pagination-link${page === x ? " is-current" : ""}`, "aria-label": `Goto page ${x}`, "data-page": x, onClick: pageChange, children: x }) }, x)), page != count && !pageNumbers.includes(count) &&
+                        _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) }), _jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": `Goto page ${count}`, "data-page": count, onClick: pageChange, children: count }) })] })] })] }));
+}
+/**
+ * Position setting to css class name map
+ */
+const paginationPositionToClassMap = new Map([
+    ["center", "is-centered"],
+    ["right", "is-right"]
+]);

package/components/paginator/index.d.ts

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

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

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

package/{dist/components/paginator/index.d.ts → components/paginator/index.js}

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