@connectif/ui-components 0.0.1

package/dist/src/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { SkeletonProps as MuiSkeletonProps } from '@mui/material/Skeleton';
+type SkeletonColorVariantId = 'default' | 'primary';
+export type SkeletonProps = Pick<MuiSkeletonProps, 'variant' | 'width' | 'height' | 'sx' | 'animation'> & {
+    colorVariant?: SkeletonColorVariantId;
+};
+declare const Skeleton: React.FC<SkeletonProps>;
+export default Skeleton;

package/dist/src/components/skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as Skeleton, SkeletonProps } from '../skeleton/Skeleton';

package/dist/src/components/snackbar/Snackbar.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { SnackbarKey, SnackbarMessage } from 'notistack';
+type SnackbarSize = 'M' | 'L';
+type SnackbarSeverity = 'success' | 'info' | 'error' | 'warning';
+export type SnackbarProps = {
+    /**
+     * Unique key associated to this snackbar. It will be used to close this
+     * snackbar using closeSnackbar returned by hook useSnackbar.
+     */
+    identifierKey: SnackbarKey;
+    /**
+     * Message to show
+     */
+    message: SnackbarMessage;
+    /**
+     * Severity of this Snackbar
+     */
+    severity?: SnackbarSeverity;
+    /**
+     * Size of Snackbar
+     */
+    size?: SnackbarSize;
+    /**
+     * Whether the icon is visible or not.
+     * The iconId will depend on severity.
+     */
+    withIcon?: boolean;
+    /**
+     * The text to show in the action button of this Snackbar.
+     * Leave it empty or undefined to not show action button.
+     */
+    actionText?: string;
+    /**
+     * Key to bind data-test attribute
+     */
+    dataTestKey?: string;
+    /**
+     * Click handler for main action button click.
+     */
+    onActionClick?: (key: SnackbarKey) => void;
+    /**
+     * Custom handler for close event.
+     */
+    onCloseClick?: (key: SnackbarKey) => void;
+};
+/**
+ * An ephemeral message to be shown in some place of the screen. AKA Toast component.
+ * This is the rendered component only. To show/hide a Snackbar, see useSnackbar hook.
+ * This component should be rendered as descendant (at any level) of SnackbarProvider.
+ */
+declare const Snackbar: React.ForwardRefExoticComponent<SnackbarProps & React.RefAttributes<HTMLDivElement>>;
+export default Snackbar;

package/dist/src/components/snackbar/SnackbarProvider.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SnackbarProviderProps as NotistackSnackbarProviderProps } from 'notistack';
+export type SnackbarProviderProps = Pick<NotistackSnackbarProviderProps, 'maxSnack' | 'domRoot' | 'children'>;
+/**
+ * Logic manager to show and hide Snackbars.
+ * Use this provider at higher level in component tree, so you can use hook `useSnackbar` in nested
+ * components to show a Snackbar.
+ */
+declare const SnackbarProvider: ({ children, maxSnack, domRoot }: SnackbarProviderProps) => JSX.Element;
+export default SnackbarProvider;

package/dist/src/components/snackbar/enqueueSnackbar.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { SnackbarOrigin } from 'notistack';
+import { SnackbarProps } from './Snackbar';
+export type EnqueueSnackbarOptions = Pick<SnackbarProps, 'severity' | 'actionText' | 'onActionClick' | 'size' | 'withIcon' | 'dataTestKey'> & {
+    /**
+     * Custom handler for close event. Leave it undefined if you want
+     * the default behavior of simply close this Snackbar.
+     */
+    onCloseClick?: SnackbarProps['onCloseClick'];
+    /**
+     * Milliseconds to automatically close the Snackbar.
+     * @default 10000
+     */
+    autoHideDurationMs?: number;
+    /**
+     * By using persist === true, auto-hide can be disabled to keep Snackbars in the view indefinitely.
+     * @default false
+     */
+    persist?: boolean;
+    /**
+     * Position where to show the snackbar
+     * @default 'center'
+     */
+    horizontalPosition?: SnackbarOrigin['horizontal'];
+};
+export declare const enqueueSnackbar: (message: React.ReactNode, options?: Partial<EnqueueSnackbarOptions>) => import("notistack").SnackbarKey;
+export { closeSnackbar } from 'notistack';

package/dist/src/components/snackbar/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SnackbarProvider } from './SnackbarProvider';
+export { default as Snackbar, SnackbarProps } from './Snackbar';
+export * from './enqueueSnackbar';

package/dist/src/components/tab/TabButton.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export type TabButtonProps = React.PropsWithChildren<{
+    /**
+     * Whether the tab button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Text align inside of tab
+     * @default left
+     *
+     */
+    textAlign?: 'left' | 'center';
+    /**
+     * Right margin of the tab
+     */
+    marginRight?: number | string;
+    /**
+     * Whether the tab button text is in uppercase or not.
+     * If true, text will not be transformed to uppercase.
+     * @default false
+     */
+    disableUppercase?: boolean;
+    dataTestId?: string;
+}>;
+/**
+ * A TabButton is a button that can be used to switch between tabs.
+ * It is usually used in a Tabs component.
+ */
+declare const TabButton: ({ children, disabled, textAlign, marginRight, dataTestId, disableUppercase, ...rest }: TabButtonProps) => JSX.Element;
+export default TabButton;

package/dist/src/components/tab/TabContent.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export type TabContentProps = React.PropsWithChildren<Record<never, never>>;
+/**
+ * The element that should be used as first child of Tabs component.
+ */
+declare const TabContent: ({ children }: TabContentProps) => JSX.Element;
+export default TabContent;

package/dist/src/components/tab/Tabs.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+export type TabsProps = {
+    /**
+     * An array with the tab buttons. Make sure it is the correlative order
+     * than the tab contents supplied as children.
+     */
+    tabButtons: React.ReactNode[];
+    /**
+     * The tab contents. Make sure it is the correlative order
+     * than the supplied tabButtons. All first-level components of this children should be TabContent.
+     */
+    children: React.ReactNode;
+    /**
+     * The index of the tab to be displayed.
+     */
+    currentTabIndex?: number;
+    /**
+     * Callback function called when the tab is changed.
+     */
+    onChangeTab?: (index: number) => void;
+    /**
+     * Establishes the distribution of the tabs.
+     * 'scrollable' is the default value, and it stacks the tabs horizontally to left.
+     * 'fullWith' distributes the tabs horizontally to fit the full width.
+     */
+    variant?: 'scrollable' | 'fullWidth';
+    /**
+     * If true, it sets the main tabs container style to have height=100%, which will be adapted to the parent height
+     * according to general css rules (i.e. the parent height should be extablished to a fixed or relative value)
+     */
+    fullHeight?: boolean;
+    /**
+     * If contained, tab indicator will be down and it will have line below tabs
+     * @default false
+     */
+    contained?: boolean;
+    /**
+     * Set the scrollbarGutter property for each slide of the SwipeableViews component.
+     */
+    scrollbarGutter?: 'stable' | 'auto';
+};
+/**
+ * Define a Tabs container, with a fixed header and a transitions on change between tabs.
+ * For a right usage, supply exactly the same quantity of tabButtons and children. They will be
+ * associated by index.
+ * By default, this component handles the current selected tab (first tab as default),
+ * but you can define the current tab by passing the currentTabIndex prop. You can also
+ * define a callback function to be called when the tab is clicked, so you can do something
+ * with the current tab index.
+ */
+declare const Tabs: ({ tabButtons, children, currentTabIndex, onChangeTab, variant, fullHeight, contained, scrollbarGutter }: TabsProps) => JSX.Element;
+export default Tabs;

package/dist/src/components/tab/Tabs.theme.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material';
+export declare const tabsTheme: Components<Theme>['MuiTabs'];

package/dist/src/components/tab/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TabButton, TabButtonProps } from './TabButton';
+export { default as Tabs, TabsProps } from './Tabs';
+export { default as TabContent, TabContentProps } from './TabContent';

package/dist/src/components/table/NestedTable.d.ts

@@ -0,0 +1,29 @@
+import { SxProps } from '@mui/material';
+import * as React from 'react';
+export type NestedTableProps = React.PropsWithChildren<{
+    /**
+     * As NestedTable should a full-width cell, the colSpan prop depends on the quantity of columns.
+     * Supply here the current total quantity of columns for the Table where this NestedTable is inserted into.
+     */
+    colSpan: number;
+    /**
+     * Usually, nested tables will be collapsibles. Supply `isVisible={false}` to collapse this nested table row.
+     */
+    isVisible?: boolean;
+    /**
+     * Custom styles to apply to the nested <Table> component.
+     */
+    sx?: SxProps;
+    /**
+     * The class names of this Table component
+     */
+    className?: string;
+}>;
+/**
+ * Use this component to show nested <Table> components inside another <Table> component.
+ * Nested tables will always should be a full row width; because of this, a colSpan is required
+ * so the intrinsic cell will know how many columns should be spanned.
+ * Nested table components are usually collapsibles. It is expanded by default if not supplied `isVisible` prop.
+ */
+declare const NestedTable: ({ colSpan, children, className, sx, isVisible }: NestedTableProps) => JSX.Element;
+export default NestedTable;

package/dist/src/components/table/Table.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TableProps as MuiTableProps } from '@mui/material';
+export type TableProps = Pick<MuiTableProps, 'sx' | 'children' | 'className'>;
+declare const Table: ({ children, sx, className }: TableProps) => JSX.Element;
+export default Table;

package/dist/src/components/table/Table.theme.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material';
+export declare const tableTheme: Components<Theme>['MuiTable'];

package/dist/src/components/table/TableBody.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export type TableBodyProps = React.PropsWithChildren<Record<never, never>>;
+declare const TableBody: ({ children }: TableBodyProps) => JSX.Element;
+export default TableBody;

package/dist/src/components/table/TableCell.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { TableCellProps as MuiTableCellProps } from '@mui/material';
+export type TableCellProps = Pick<MuiTableCellProps, 'children' | 'align' | 'colSpan' | 'sortDirection' | 'sx' | 'onClick' | 'className'> & {
+    /**
+     * Size of cell. All cells in the same TableRow should have the same size.
+     */
+    size?: 'S' | 'M';
+    /**
+     * Sets CSS white-space: nowrap to this cell
+     */
+    noWrap?: boolean;
+    sticky?: 'left' | 'right';
+    /**
+     * Weather the cell have to remove border.
+     * @default false
+     */
+    noBorder?: boolean;
+};
+declare const TableCell: ({ children, size, sx, noWrap, sticky, className, onClick, noBorder, ...rest }: TableCellProps) => JSX.Element;
+export default TableCell;

package/dist/src/components/table/TableCell.theme.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material';
+export declare const tableCellTheme: Components<Theme>['MuiTableCell'];

package/dist/src/components/table/TableCellCopy.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TableCellProps } from './TableCell';
+export type TableCellCopyProps = TableCellProps & {
+    /**
+     * Text to show
+     */
+    text: string;
+};
+declare const TableCellCopy: ({ text, ...rest }: TableCellCopyProps) => JSX.Element;
+export default TableCellCopy;

package/dist/src/components/table/TableDivider.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const TableDivider: () => JSX.Element;
+export default TableDivider;

package/dist/src/components/table/TableHead.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export type TableHeadProps = React.PropsWithChildren<Record<never, never>>;
+declare const TableHead: ({ children }: TableHeadProps) => JSX.Element;
+export default TableHead;

package/dist/src/components/table/TableRow.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { TableRowProps as MuiTableRowProps } from '@mui/material';
+export type TableRowProps = React.PropsWithChildren<{
+    isFollowedByNestedTable?: boolean;
+    fadeInLeftAnimation?: boolean;
+    sx?: MuiTableRowProps['sx'];
+}>;
+declare const TableRow: ({ children, isFollowedByNestedTable, fadeInLeftAnimation, sx }: TableRowProps) => JSX.Element;
+export default TableRow;

package/dist/src/components/table/TableSortLabel.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TableSortLabelProps as MuiTableSortLabelProps } from '@mui/material';
+export type TableSortLabelProps = Pick<MuiTableSortLabelProps, 'children' | 'active' | 'direction' | 'onClick'>;
+/**
+ * An special structure to show a clickable header label in a Table to short by that column
+ */
+declare const TableSortLabel: ({ children, ...rest }: TableSortLabelProps) => JSX.Element;
+export default TableSortLabel;

package/dist/src/components/table/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Table, TableProps } from './Table';
+export { default as TableBody, TableBodyProps } from './TableBody';
+export { default as TableCell, TableCellProps } from './TableCell';
+export { default as TableCellCopy, TableCellCopyProps } from './TableCellCopy';
+export { default as TableDivider } from './TableDivider';
+export { default as TableHead, TableHeadProps } from './TableHead';
+export { default as TableRow, TableRowProps } from './TableRow';
+export { default as TableSortLabel, TableSortLabelProps } from './TableSortLabel';
+export { default as NestedTable, NestedTableProps } from './NestedTable';

package/dist/src/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { BoxProps } from '@mui/material';
+export type ToolbarProps = React.PropsWithChildren<{
+    /**
+     * Actions to show at the right side.
+     */
+    rightActions?: React.ReactNode;
+    /**
+     * Actions to show at the left side.
+     */
+    leftActions?: React.ReactNode;
+    className?: string;
+    sx?: BoxProps['sx'];
+    dataTestId?: string;
+    /**
+     * Called when the toolbar is clicked
+     */
+    onClickToolbar?: React.MouseEventHandler<HTMLDivElement>;
+}>;
+/**
+ * A toolbar with three sections: left, middle, and right. Each section can be empty.
+ */
+declare const Toolbar: ({ children, rightActions, leftActions, className, sx, dataTestId, onClickToolbar }: ToolbarProps) => JSX.Element;
+export default Toolbar;

package/dist/src/components/toolbar/ToolbarBreadcrumb.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export type ToolbarBreadcrumbProps = {
+    /**
+     * The breadcrumb parts to display. It should be an array of some of these components (can be mixed):
+     * - ToolbarBreadcrumbButton
+     * - ToolbarTitle
+     */
+    parts?: React.ReactNode[];
+};
+/**
+ * The title for a Toolbar component when you want to represent a breadcrumb ended with the title.
+ * It automatically insert "/" separators between parts
+ */
+declare const ToolbarBreadcrumb: ({ parts }: ToolbarBreadcrumbProps) => JSX.Element;
+export default ToolbarBreadcrumb;

package/dist/src/components/toolbar/ToolbarBreadcrumbButton.d.ts

@@ -0,0 +1,11 @@
+import { SxProps } from '@mui/material';
+import * as React from 'react';
+export type ToolbarBreadcrumbButtonProps = {
+    text: string;
+    className?: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    sx?: SxProps;
+    disabled?: boolean;
+};
+declare const ToolbarBreadcrumbButton: React.ForwardRefExoticComponent<ToolbarBreadcrumbButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ToolbarBreadcrumbButton;

package/dist/src/components/toolbar/ToolbarTitle.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+export type ToolbarTitleProps = {
+    /**
+     * The title to display.
+     */
+    title: string;
+    /**
+     * Title text alignment.
+     */
+    align?: 'left' | 'right';
+    className?: string;
+    /**
+     * Actions to show on hover.
+     */
+    hoverActions?: ReactNode;
+    /**
+     * The color of the title.
+     */
+    color?: string;
+};
+/**
+ * The title for a Toolbar component. It automatically handles show a tooltip if the title
+ * gets clipped with ellipsis
+ */
+declare const ToolbarTitle: React.ForwardRefExoticComponent<ToolbarTitleProps & React.RefAttributes<unknown>>;
+export default ToolbarTitle;

package/dist/src/components/toolbar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Toolbar, ToolbarProps } from './Toolbar';
+export { default as ToolbarTitle, ToolbarTitleProps } from './ToolbarTitle';
+export { default as ToolbarBreadcrumb, ToolbarBreadcrumbProps } from './ToolbarBreadcrumb';
+export { default as ToolbarBreadcrumbButton, ToolbarBreadcrumbButtonProps } from './ToolbarBreadcrumbButton';

package/dist/src/components/tooltip/TextEllipsis.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ThemeTypography } from '../../theme';
+import { SxProps } from '@mui/material';
+export type TextEllipsisProps = {
+    text?: React.ReactNode;
+    typographyVariant: ThemeTypography.TypographyVariant;
+    color?: string;
+    width?: string;
+    maxWidth?: string;
+    /**
+     * Number of lines to apply ellipsis. If no set, one line
+     */
+    lines?: number;
+    'data-test'?: string;
+    sx?: SxProps;
+};
+declare const TextEllipsis: ({ text, typographyVariant, color, width, lines, maxWidth, "data-test": dataTest, sx }: TextEllipsisProps) => JSX.Element;
+export default TextEllipsis;

package/dist/src/components/tooltip/TextEllipsisTooltip.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { TooltipProps } from './Tooltip';
+export type TextEllipsisTooltipProps = TooltipProps & {
+    /**
+     * A Reference to the ellipsable element.
+     */
+    textEllipsableElement: React.RefObject<Element>;
+    /**
+     * Number of lines to apply ellipsis. If no set, one line
+     */
+    lines?: number;
+};
+/**
+ * An extended Tooltip component that can be used to display the full text (or any
+ * other text) only when inner text of `textEllipsableElement` is truncated
+ * with ellipsis (scrollWidth > clientWidth). See Tooltip component to know more about Tooltip usage.
+ *
+ * *KNOWN ISSUES*
+ * - This is not pixel perfect solution: it could be that text-ellipsis appears without tooltip when it is
+ * too close to fit in the available space.
+ * - When the `textEllipsableElement` has some inner paddings or borders, the previous known issue get even worse.
+ *
+ * @see https://stackoverflow.com/questions/56588625/react-show-material-ui-tooltip-only-for-text-that-has-ellipsis
+ *
+ */
+declare const TextEllipsisTooltip: ({ textEllipsableElement, lines, ...rest }: TextEllipsisTooltipProps) => JSX.Element;
+export default TextEllipsisTooltip;

package/dist/src/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { TooltipProps as MuiTooltipProps } from '@mui/material';
+import { TypographyProps } from '../typography/Typography';
+export type TooltipVariant = 'default' | 'white' | 'error' | 'blue';
+export type TooltipProps = Pick<MuiTooltipProps, 'children' | 'disableHoverListener' | 'open'> & {
+    /**
+     * The content to display in the tooltip.
+     */
+    title: NonNullable<React.ReactNode>;
+    /**
+     * The placement of the tooltip.
+     */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * If set, it won't close when the user hovers over the tooltip
+     */
+    interactive?: boolean;
+    /**
+     * If set, tooltip will show up in disabled elements such as buttons and text fields. Default is false.
+     */
+    allowDisabled?: boolean;
+    /**
+     * The background color of the tooltip
+     * @default 'default'
+     */
+    variant?: TooltipVariant;
+    /**
+     * The variant of the text in the tooltip
+     */
+    textVariant?: TypographyProps['variant'];
+    /**
+     * If set, the arrow will be shown
+     * @default false
+     */
+    enableArrow?: boolean;
+    /**
+     * The border radius of the tooltip
+     * @default 4
+     */
+    borderRadius?: number;
+    /**
+     * Class to override .MuiTooltip-popper styles
+     */
+    popperClass?: string;
+    /**
+     * zIndex to set in tooltip
+     */
+    zIndex?: number;
+};
+/**
+ * A tooltip component that can be used to display additional information about
+ * an element.
+ * Its used by wrapping the trigger element with the Tooltip component.
+ * **IMPORTANT**: The Tooltip children must be able to hold a ref. More info here:
+ * - https://mui.com/material-ui/guides/composition/#caveat-with-refs
+ * - https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components
+ */
+declare const Tooltip: ({ children, title, placement, interactive, allowDisabled, variant, textVariant, enableArrow, borderRadius, popperClass, zIndex, ...rest }: TooltipProps) => JSX.Element;
+export default Tooltip;

package/dist/src/components/tooltip/Tooltip.theme.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material';
+export declare const tooltipTheme: Components<Theme>['MuiTooltip'];

package/dist/src/components/tooltip/TooltipMenu.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { TooltipProps } from '@mui/material';
+export type TooltipMenuProps = {
+    /**
+     * Menu content to show when tooltip is open.
+     */
+    menuContent: NonNullable<React.ReactNode>;
+    /**
+     * The placement of the tooltip.
+     */
+    placement?: TooltipProps['placement'];
+    /**
+     * Children to anchor the tooltip.
+     */
+    children: React.ReactElement<unknown>;
+    /**
+     * Show or hide tooltip. If undefined, tooltip will be on hovering children.
+     */
+    isOpen?: boolean;
+    /**
+     * Integer to indicate the offset from the top of the menu
+     * @default 0
+     */
+    offsetTop?: number;
+    /**
+     * Integer to indicate the offset from the left of the menu
+     * @default 0
+     */
+    offsetLeft?: number;
+};
+/**
+ * Displays a tooltip with a ReactNode on top of a child component.
+ */
+declare const TooltipMenu: ({ children, placement, menuContent, isOpen, offsetTop, offsetLeft }: TooltipMenuProps) => JSX.Element;
+export default TooltipMenu;

package/dist/src/components/tooltip/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip, TooltipProps } from './Tooltip';
+export { default as TooltipMenu, TooltipMenuProps } from './TooltipMenu';
+export { default as TextEllipsisTooltip, TextEllipsisTooltipProps } from './TextEllipsisTooltip';
+export { default as TextEllipsis, TextEllipsisProps } from './TextEllipsis';

package/dist/src/components/transition/Slide.d.ts

@@ -0,0 +1,3 @@
+import Slide, { SlideProps as MuiSlideProps } from '@mui/material/Slide';
+export type SlideProps = MuiSlideProps;
+export default Slide;

package/dist/src/components/transition/index.d.ts

@@ -0,0 +1 @@
+export { default as Slide, SlideProps } from './Slide';

package/dist/src/components/typography/TextMarker.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export type TextMarkerProps = {
+    /**
+     * The background color to be used as marker color
+     */
+    backgroundColor?: string;
+    /**
+     * The text pattern to be search in children. This is the marked text.
+     */
+    searchText: string;
+    /**
+     * The complete text to show.
+     */
+    children: string;
+    /**
+     * Wheather the pattern is case sensitive or not.
+     */
+    isCaseSensitive?: boolean;
+    /**
+     * The mode to search within the children.
+     */
+    mode?: 'startsWith' | 'contains' | 'endsWith';
+    /**
+     * The separator to split the searchText in multiple tokens.
+     */
+    multiSearchCharSeparator?: string;
+};
+/**
+ * Change a plain text by a set of marked and not-marked tokens, according to a searchText pattern.
+ */
+declare const TextMarker: ({ backgroundColor, searchText, isCaseSensitive, mode, multiSearchCharSeparator, children }: TextMarkerProps) => JSX.Element;
+export default TextMarker;