@bodynarf/react.components 1.6.3 → 1.7.1

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

@@ -1,27 +1,26 @@
-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
+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;
+}

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

@@ -1,34 +1,31 @@
-/// <reference types="react" />
-import "./style.scss";
-import { BaseElementProps, ElementSize } from "../..";
-import { TabItem, TabsPosition, TabsStyle } from "..";
-/** 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
+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;

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

@@ -1,13 +1,11 @@
-/// <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;
-//# sourceMappingURL=index.d.ts.map
+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;

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

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

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

@@ -1,43 +1,42 @@
-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
+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;
+}

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

@@ -1,7 +1,4 @@
-/// <reference types="react" />
-import { TagProps } from "../..";
-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
+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;

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

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

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

@@ -1,27 +1,26 @@
-import { BaseElementProps, ElementColor, ElementSize } from "..";
-/** Tag item prop types */
-export interface TagProps extends BaseElementProps {
-    /** Tag contnet*/
-    content: string;
-    /**
-     * Element size.
-     * `Small` isn"t allowed
-    */
-    size?: ElementSize;
-    /** Element color */
-    style?: ElementColor;
-    /** Is element with rounded border */
-    rounded?: boolean;
-    /** Is element has light color */
-    lightColor?: boolean;
-    /** Click handler */
-    onClick?: () => void;
-    /** Manual color scheme */
-    customColor?: {
-        /** Text color */
-        color: string;
-        /** Background color */
-        backgroundColor: string;
-    };
-}
-//# sourceMappingURL=types.d.ts.map
+import { BaseElementProps, ElementColor, ElementSize } from '../../components';
+/** Tag item prop types */
+export interface TagProps extends BaseElementProps {
+    /** Tag content */
+    content: string;
+    /**
+     * Element size.
+     * `Small` isn"t allowed
+    */
+    size?: ElementSize;
+    /** Element color */
+    style?: ElementColor;
+    /** Is element with rounded border */
+    rounded?: boolean;
+    /** Is element has light color */
+    lightColor?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Manual color scheme */
+    customColor?: {
+        /** Text color */
+        color: string;
+        /** Background color */
+        backgroundColor: string;
+    };
+}

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

@@ -1,67 +1,66 @@
-/** Base interface for component props */
-export interface BaseElementProps {
-    /** Additional class names */
-    className?: string;
-    /** Title */
-    title?: string;
-    /** Extra data-* attributes */
-    data?: DataAttributes;
-}
-/**
- * Html data-* attributes
- * @description All keys with defined values will be mapped injected into html element as data-{key} attributes
-*/
-export interface DataAttributes {
-    /** Single data-* attribute value */
-    [key: string]: any;
-}
-/** Input component size variety */
-export declare enum ElementSize {
-    /** Font size is 0.75rem */
-    Small = "small",
-    /** Font size is 1rem. Default */
-    Normal = "normal",
-    /** Font size is 1.25rem */
-    Medium = "medium",
-    /** Font size is 1.5rem */
-    Large = "large"
-}
-/** Input component border-color type */
-export declare enum ElementColor {
-    /** color: transparent */
-    Default = "default",
-    /** color: seawave green */
-    Primary = "primary",
-    /** color: blue-violet */
-    Link = "link",
-    /** color: sky-blue */
-    Info = "info",
-    /** color: green */
-    Success = "success",
-    /** color: yellow */
-    Warning = "warning",
-    /** color: red */
-    Danger = "danger"
-}
-/** Allowed icon position */
-export declare type IconPosition = "left" | "right";
-/** Icon for component  */
-export interface ElementIcon {
-    /**
-     * 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;
-    /**
-     * Position
-     * Works only with other content
-    */
-    position?: IconPosition;
-}
-//# sourceMappingURL=types.d.ts.map
+/** Base interface for component props */
+export interface BaseElementProps {
+    /** Additional class names */
+    className?: string;
+    /** Title */
+    title?: string;
+    /** Extra data-* attributes */
+    data?: DataAttributes;
+}
+/**
+ * Html data-* attributes
+ * @description All keys with defined values will be mapped injected into html element as data-{key} attributes
+*/
+export interface DataAttributes {
+    /** Single data-* attribute value */
+    [key: string]: any;
+}
+/** Input component size variety */
+export declare enum ElementSize {
+    /** Font size is 0.75rem */
+    Small = "small",
+    /** Font size is 1rem. Default */
+    Normal = "normal",
+    /** Font size is 1.25rem */
+    Medium = "medium",
+    /** Font size is 1.5rem */
+    Large = "large"
+}
+/** Input component border-color type */
+export declare enum ElementColor {
+    /** color: transparent */
+    Default = "default",
+    /** color: seawave green */
+    Primary = "primary",
+    /** color: blue-violet */
+    Link = "link",
+    /** color: sky-blue */
+    Info = "info",
+    /** color: green */
+    Success = "success",
+    /** color: yellow */
+    Warning = "warning",
+    /** color: red */
+    Danger = "danger"
+}
+/** Allowed icon position */
+export type IconPosition = "left" | "right";
+/** Icon for component  */
+export interface ElementIcon {
+    /**
+     * 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;
+    /**
+     * Position
+     * Works only with other content
+    */
+    position?: IconPosition;
+}

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

@@ -1,2 +1,2 @@
-export * from "./useComponentOutsideClick";
-export * from "./usePagination";
+export * from "./useComponentOutsideClick";
+export * from "./usePagination";

package/{hooks → dist/hooks}/useComponentOutsideClick.d.ts

@@ -1,11 +1,10 @@
-import { DependencyList } from "react";
-/**
- * Subscribe to component outside click
- * @param selector Component root selector
- * @param clickHandleCondition Condition to handle document click
- * @param clickHandleChange Handler of outside component click
- * @param clickListenCondition Condition to start listening document clicks
- * @param dependencies Additional dependencies to update hook
- */
-export declare const useComponentOutsideClick: (selector: string, clickHandleCondition: boolean, clickHandleChange: () => void, clickListenCondition?: boolean, dependencies?: DependencyList) => void;
-//# sourceMappingURL=useComponentOutsideClick.d.ts.map
+import { DependencyList } from "react";
+/**
+ * Subscribe to component outside click
+ * @param selector Component root selector
+ * @param clickHandleCondition Condition to handle document click
+ * @param clickHandleChange Handler of outside component click
+ * @param clickListenCondition Condition to start listening document clicks
+ * @param dependencies Additional dependencies to update hook
+ */
+export declare const useComponentOutsideClick: (selector: string, clickHandleCondition: boolean, clickHandleChange: () => void, clickListenCondition?: boolean, dependencies?: DependencyList) => void;

package/{hooks → dist/hooks}/usePagination.d.ts

@@ -1,20 +1,19 @@
-import { DependencyList } from "react";
-/** Paginator hook state */
-export interface PaginationState {
-    /** Number of current page */
-    currentPage: number;
-    /** Amount of pages */
-    pagesCount: number;
-    /** Handler of page change */
-    onPageChange: (page: number) => void;
-}
-/**
- * Hook to pagination state, return hooked values and handler for pagination
- * @param length Pagionation items count
- * @param size Page size. Default is 30
- * @param initPage Initial page. Default is 1
- * @param dependencies List of dependencies. On any dependency update current page will be set to 1
- * @returns Pair of hook-stored state and handler for slicing current page items
- */
-export declare const usePagination: (length: number, size?: number, initPage?: number, dependencies?: DependencyList) => [PaginationState, (data: Array<any>) => Array<any>];
-//# sourceMappingURL=usePagination.d.ts.map
+import { DependencyList } from "react";
+/** Paginator hook state */
+export interface PaginationState {
+    /** Number of current page */
+    currentPage: number;
+    /** Amount of pages */
+    pagesCount: number;
+    /** Handler of page change */
+    onPageChange: (page: number) => void;
+}
+/**
+ * Hook to pagination state, return hooked values and handler for pagination
+ * @param length Pagionation items count
+ * @param size Page size. Default is 30
+ * @param initPage Initial page. Default is 1
+ * @param dependencies List of dependencies. On any dependency update current page will be set to 1
+ * @returns Pair of hook-stored state and handler for slicing current page items
+ */
+export declare const usePagination: (length: number, size?: number, initPage?: number, dependencies?: DependencyList) => [PaginationState, (data: Array<any>) => Array<any>];

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

@@ -1,3 +1,3 @@
-export * from "./components";
-export * from "./hooks";
-export * from "./utils";
+export * from "./components";
+export * from "./hooks";
+export * from "./utils";

package/dist/style.css

@@ -0,0 +1 @@
+.bbr-icon{transition:.15s ease-in-out color;font-size:1rem}.bbr-icon--size-small{font-size:.85rem}.bbr-icon--size-medium{font-size:1.25rem}.bbr-icon--size-large{font-size:2rem}.bbr-icon--right{margin-left:.5rem}.bbr-icon--left{margin-right:.5rem}.bbr-anchor{text-decoration:none;color:inherit;transition:.15s ease-in-out color}.bbr-anchor:not(.bbr-anchor--unhoverable):hover{text-decoration:underline;color:#3273dc}.bbr-anchor .bbr-icon{transition:none}.bbr-button{transition:.15s ease-in-out;transition-property:background-color,border-color}.bbr-button--icon-only{padding:.55rem!important}.bbr-button.is-warning.is-outlined:not([disabled]):hover{color:#000!important}.bbr-dropdown{min-width:7.5rem}.bbr-dropdown:not(.bbr-dropdown--compact){display:block}.bbr-dropdown:not(.bbr-dropdown--compact) .dropdown-menu{min-width:100%}.bbr-dropdown .dropdown-menu .dropdown-content{overflow:auto}.bbr-dropdown__label{cursor:pointer;user-select:none;display:flex;justify-content:flex-start}.bbr-dropdown__label span{white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;max-width:15rem}.bbr-dropdown__label--default span{color:gray;font-style:italic}.bbr-dropdown__label .bbr-icon:hover{color:#0d6efd}.bbr-dropdown__label .bbr-icon.bi-arrow-down{margin-left:auto}.bbr-dropdown__label .bbr-icon.bi-arrow-down:before{transition:.25s ease-in-out transform}.bbr-dropdown__label .bbr-icon.bi-plus-lg:before{transform:rotate(45deg)}.bbr-dropdown__label.is-success--md{border-color:#48c78e}.bbr-dropdown__label.is-danger--md{border-color:#f14668}.bbr-dropdown-item{cursor:pointer;user-select:none;white-space:normal;transition:.25s ease-in-out;transition-property:color,background-color}.bbr-dropdown-item:hover{background-color:#0000000d;color:#0a0a0a}.bbr-dropdown-item:active{background-color:#00000026;color:#0a0a0a}.bbr-dropdown-item.is-active{background-color:#485fc7;color:#fff}.bbr-dropdown.is-active .bbr-dropdown__label .bbr-icon.bi-arrow-down:before{transform:rotate(180deg)}.bbr-dropdown--height-default .dropdown-menu .dropdown-content{max-height:15vw}.bbr-dropdown--compact{width:fit-content}.bbr-dropdown--compact .dropdown-menu{min-width:11.75rem}.bbr-dropdown--disabled .bbr-dropdown__label{background-color:#f5f5f5;border-color:#f5f5f5;box-shadow:none;color:#7a7a7a;cursor:not-allowed}.bbr-dropdown--disabled .bbr-dropdown__label .bbr-icon{pointer-events:none}.bbr-search input[type=search]{transition:.15s ease-out;transition-property:border-color,color,background-color}.bbr-search input[type=search]::placeholder{user-select:none}.bbr-search input[type=search]::-webkit-input-placeholder{transition:.15s ease-out color}.bbr-search input[type=search]::-webkit-search-cancel-button{cursor:pointer;font-size:1.25rem}.bbr-search.is-loading:after{right:1rem;top:.725rem}.bbr-tabs__tab .bbr-icon:first-child{margin-right:.5rem}.bbr-tabs__tab .bbr-icon:last-child{margin-left:.5rem}.bbr-tag{border:1px solid transparent;transition:border-color .15s ease-in-out}.bbr-tag--clickable{cursor:pointer}.bbr-tag--clickable.is-light:hover{border-color:#00000040}.bbr-tag--clickable.is-light:focus,.bbr-tag--clickable.is-light:active{border-color:#00000080}.bbr-tag--clickable:not(.is-light):hover{border-color:#00000059}.bbr-tag--clickable:not(.is-light):focus,.bbr-tag--clickable:not(.is-light):active{border-color:#000000bf}.is-checkradio.m-check-radio[type=checkbox].has-background-color.m-has-background-color:not(:checked)+label:before{border-color:#dbdbdb!important;background-color:transparent!important}.is-checkradio.m-check-radio[type=checkbox]+label:before{top:.125rem}.help.m-help{white-space:pre-line}.bbr-password:focus~.icon:not(:hover){color:#dbdbdb!important}.bbr-password__wrapper .icon{pointer-events:inherit!important;cursor:pointer}.bbr-password__wrapper .icon:hover{color:#4a4a4a}

package/{utils → dist/utils}/dataAttributes.d.ts

@@ -1,8 +1,7 @@
-import { DataAttributes } from "..";
-/**
- * Map object with key-value pairs to html data attributes format
- * @param dataAttributes Object with data attribute values
- * @returns Object that could be injected into react html element as data-* attribute values
- */
-export declare const mapDataAttributes: (dataAttributes: DataAttributes) => object;
-//# sourceMappingURL=dataAttributes.d.ts.map
+import { DataAttributes } from '..';
+/**
+ * Map object with key-value pairs to html data attributes format
+ * @param dataAttributes Object with data attribute values
+ * @returns Object that could be injected into react html element as data-* attribute values
+ */
+export declare const mapDataAttributes: (dataAttributes: DataAttributes) => object;

package/{utils → dist/utils}/formValidation.d.ts

@@ -1,16 +1,15 @@
-import { ElementColor, ValidationState } from "../components";
-/**
- * Get current validation state values
- * @param style Component style color
- * @param validationState Current form item validation state
- * @returns [Is validation applicable; classname attribute value; validation messages]
- */
-export declare const getValidationValues: (style?: ElementColor, validationState?: ValidationState) => [boolean, string, Array<string>];
-/**
- * Get classname attribute value based on current validation state and form item component style prop
- * @param style Component style color
- * @param validationState Current form item validation state
- * @returns Classname attribute value
- */
-export declare const getStyleClassName: (style?: ElementColor, validationState?: ValidationState) => string;
-//# sourceMappingURL=formValidation.d.ts.map
+import { ElementColor, ValidationState } from '../components';
+/**
+ * Get current validation state values
+ * @param style Component style color
+ * @param validationState Current form item validation state
+ * @returns [Is validation applicable; classname attribute value; validation messages]
+ */
+export declare const getValidationValues: (style?: ElementColor, validationState?: ValidationState) => [boolean, string, Array<string>];
+/**
+ * Get classname attribute value based on current validation state and form item component style prop
+ * @param style Component style color
+ * @param validationState Current form item validation state
+ * @returns Classname attribute value
+ */
+export declare const getStyleClassName: (style?: ElementColor, validationState?: ValidationState) => string;

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

@@ -1,2 +1,2 @@
-export * from "./formValidation";
-export * from "./dataAttributes";
+export * from "./formValidation";
+export * from "./dataAttributes";