@fattureincloud/fic-design-system 0.4.28 → 0.4.29-new-table

package/dist/components/newTable/components/utils.d.ts

@@ -0,0 +1,10 @@
+import { ColumnPinningPosition } from '@tanstack/react-table';
+import { DefaultTheme } from 'styled-components';
+interface Props {
+    theme: DefaultTheme;
+    isHeader: boolean;
+    isPopoverActive?: boolean;
+    isPinned: ColumnPinningPosition;
+}
+export declare const getFixedColumnsStyles: ({ theme, isHeader, isPopoverActive, isPinned }: Props) => React.CSSProperties;
+export {};

package/dist/components/newTable/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const HEIGHT_SMALL = 42;
+export declare const HEIGHT_LARGE = 56;

package/dist/components/newTable/hooks/useColumnPinning.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ColumnPinningState } from '@tanstack/react-table';
+interface ReturnType {
+    readonly columnPinning: ColumnPinningState;
+    readonly setColumnPinning: React.Dispatch<React.SetStateAction<ColumnPinningState>>;
+}
+export declare const useColumnPinning: (defaultValues?: ColumnPinningState | undefined) => ReturnType;
+export {};

package/dist/components/newTable/hooks/usePagination.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PaginationState } from '@tanstack/react-table';
+interface ReturnType {
+    readonly pageIndex: number;
+    readonly pageSize: number;
+    readonly setPagination: React.Dispatch<React.SetStateAction<PaginationState>>;
+}
+export declare const usePagination: (size: number) => ReturnType;
+export {};

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

@@ -0,0 +1,2 @@
+export { default as NewTable } from './Table';
+export { ColumnDefType } from './types';

package/dist/components/newTable/providers/TableProvider/TableProvider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TableContextProps, TableProviderProps } from '.';
+export declare const TableContext: React.Context<TableContextProps>;
+declare const TableProvider: ({ children, defaultRowSize }: TableProviderProps) => JSX.Element;
+export default TableProvider;

package/dist/components/newTable/providers/TableProvider/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TableProvider } from './TableProvider';
+export { TableContext } from './TableProvider';
+export { TableContextProps, TableProviderProps } from './types';

package/dist/components/newTable/providers/TableProvider/types.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { RowSize } from '../../types';
+export interface TableContextProps {
+    rowSize: RowSize;
+    setRowSize: (rowHeight: RowSize) => void;
+}
+export interface TableProviderProps {
+    children: React.ReactNode | React.ReactNode[];
+    defaultRowSize?: RowSize;
+}

package/dist/components/newTable/stories/actions.d.ts

@@ -0,0 +1,4 @@
+import { BulkAction, RowActions } from '../types';
+import { DataType } from './types';
+export declare const rowActions: RowActions<DataType>;
+export declare const bulkActions: BulkAction<DataType>[];

package/dist/components/newTable/stories/columns.d.ts

@@ -0,0 +1,3 @@
+import { ColumnsType } from '../types';
+import { DataType } from './types';
+export declare const columns: ColumnsType<DataType>[];

package/dist/components/newTable/stories/data.d.ts

@@ -0,0 +1,2 @@
+import { DataType } from './types';
+export declare const data: DataType[];

package/dist/components/newTable/stories/styled.d.ts

@@ -0,0 +1 @@
+export declare const TableWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/newTable/stories/types.d.ts

@@ -0,0 +1,9 @@
+import { CellProps } from '../types';
+export interface DataType {
+    id: string;
+    supplier: CellProps;
+    description: CellProps;
+    payment: CellProps;
+    amount: CellProps;
+    date: CellProps;
+}

package/dist/components/newTable/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ScrollableContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TableWrapper: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
+export declare const SortIndicator: import("styled-components").StyledComponent<({ onClick, isDisabled, ...props }: import("../icon").IconProps) => JSX.Element, import("styled-components").DefaultTheme, {
+    isSorted: boolean;
+    isSortedDesc: boolean;
+}, never>;
+export declare const PaginationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/newTable/table.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { DataType } from './stories/types';
+import { TableProps } from './types';
+export declare const Template: Story<TableProps<DataType>>;
+declare const TableStories: Meta<TableProps<DataType>>;
+export default TableStories;

package/dist/components/newTable/types.d.ts

@@ -0,0 +1,170 @@
+/// <reference types="react" />
+import { DisplayColumnDef, GroupColumnDef, IdentifiedColumnDef, PaginationState, Row, SortDirection } from '@tanstack/react-table';
+import { AvatarProps } from '../avatar/types';
+import { ButtonProps } from '../buttons';
+import { DropdownItemType } from '../dropdown/types';
+import { IconProps } from '../icon/Icon';
+import { MicroTagProps } from '../microTag/MicroTag';
+import { TagProps } from '../tag/types';
+import { TooltipProps } from '../tooltip';
+export interface TableProps<T> {
+    uniqueId: keyof T;
+    data: T[];
+    columns: ColumnsType<T>[];
+    isSelectable?: boolean;
+    onRowSelectionChange?: (data: T[]) => void;
+    favorites?: string[];
+    onFavoritesChange?: (favourites: string[]) => void;
+    toggles?: string[];
+    onTogglesChange?: (toggles: string[]) => void;
+    rowSize?: RowSize;
+    headerSize?: RowSize;
+    sortable?: boolean;
+    sortDescFirst?: boolean;
+    onSort?: OnSort<T>;
+    isFavoritesSortable?: boolean;
+    isTogglesSortable?: boolean;
+    rowActions?: RowActions<T>;
+    bulkActions?: BulkAction<T>[];
+    isLoading?: boolean;
+    allSelectedCTA?: AllSelectedCTA;
+    noPagination?: boolean;
+    pageSize?: number;
+    listSize?: number;
+    enableSettings?: boolean;
+    settingsDropdownConfig?: SettingsDropdownConfig;
+    paginationPreviousText?: string;
+    paginationNextText?: string;
+    onPaginationChange?: (pagination: PaginationState) => void;
+}
+interface SettingsDropdownConfig {
+    settingsTooltip?: TooltipProps;
+    displaySettingsLabel?: string;
+    visibleColumnsLabel?: string;
+    rowHeightLabel?: string;
+    unspecifiedRowsLabel?: string;
+    smallRowsLabel?: string;
+    largeRowsLabel?: string;
+}
+export declare enum RowSize {
+    UNSPECIFIED = 0,
+    SMALL,
+    LARGE
+}
+export declare enum ColumnDefType {
+    ACCESSOR = "accessor",
+    DISPLAY = "display",
+    GROUP = "group",
+    ACTION = "action"
+}
+interface ExtraColumnDef<T> extends IdentifiedColumnDef<T, CellProps> {
+    isEditable: boolean;
+    onChange: (text: string, row: Row<T>) => void;
+}
+interface InitalColumnDef<T> extends IdentifiedColumnDef<T, CellProps> {
+    isEditable?: false;
+    onChange?: never;
+}
+export declare type AccessorColumnDef<T> = InitalColumnDef<T> | ExtraColumnDef<T>;
+export declare enum ActionType {
+    CHECKBOX = "checkbox",
+    TOGGLE = "toggle",
+    FAVORITE = "favorite",
+    ROW_ACTIONS = "row_actions",
+    SETTINGS = "settings"
+}
+export declare type ActionColumnDef<T> = {
+    onActionChange?: (id: string) => void;
+    actionType: ActionType;
+    favorites?: string[];
+    toggles?: string[];
+    enableSorting?: boolean;
+    enableSettings?: boolean;
+    rowActions?: RowActions<T>;
+    settingsDropdownConfig?: SettingsDropdownConfig;
+} & IdentifiedColumnDef<T, CellProps>;
+export declare type AdditionalColumnDef = {
+    unitSymbol?: string;
+    minWidth?: number;
+    headerTooltip?: TooltipProps;
+};
+export declare type ColumnsType<T> = ({
+    columnDefType: ColumnDefType.ACCESSOR;
+    columnDef: AccessorColumnDef<T> & AdditionalColumnDef;
+} & BaseColumnsType<T>) | ({
+    columnDefType: ColumnDefType.DISPLAY;
+    columnDef: DisplayColumnDef<T, unknown> & AdditionalColumnDef;
+} & BaseColumnsType<T>) | ({
+    columnDefType: ColumnDefType.ACTION;
+    columnDef: ActionColumnDef<T> & AdditionalColumnDef;
+} & BaseColumnsType<T>) | ({
+    columnDefType: ColumnDefType.GROUP;
+    columnDef: GroupColumnDef<T, unknown>;
+} & BaseColumnsType<T>);
+interface BaseColumnsType<T> {
+    key: keyof T | Lowercase<keyof typeof ActionType>;
+}
+interface CustomCellWithAvatar extends BasicCustomCell {
+    avatar?: AvatarProps;
+    leadingIcon?: never;
+}
+interface CustomCellWithIcon extends BasicCustomCell {
+    avatar?: never;
+    leadingIcon?: IconProps;
+}
+export interface BasicCustomCell {
+    unitSymbol?: string;
+    trailingMicroTag?: MicroTagProps;
+    headline?: boolean;
+    content?: string | number;
+    tag?: TagProps;
+    isFavorite?: boolean;
+    isToggled?: boolean;
+}
+export declare type CustomCellProps = CustomCellWithIcon | CustomCellWithAvatar;
+export declare type CellProps = CustomCellProps | string | number;
+export interface RowActions<T> {
+    headerTitle?: string | number;
+    primary?: PrimaryAction<T>;
+    dropdown?: DropdownAction<T>;
+}
+export interface RowAction<T> {
+    text: string;
+    icon?: IconProps;
+    type?: DropdownItemType;
+    onClick: (row: Row<T>) => void;
+}
+declare type BasicPrimaryAction<T> = {
+    tooltip?: TooltipProps;
+    onClick: (row: Row<T>) => void;
+};
+interface PrimaryTextAction<T> extends BasicPrimaryAction<T> {
+    text?: string | number;
+    icon?: never;
+}
+interface PrimaryIconAction<T> extends BasicPrimaryAction<T> {
+    text?: never;
+    icon?: IconProps;
+}
+export declare type PrimaryAction<T> = PrimaryTextAction<T> | PrimaryIconAction<T>;
+export declare type DropdownAction<T> = {
+    items: RowAction<T>[];
+    tooltip?: TooltipProps;
+};
+export interface BulkAction<T> extends Omit<ButtonProps, 'onClick' | 'text'> {
+    onClick: (rows: T[]) => void;
+    text: string | JSX.Element;
+}
+export interface AllSelectedCTA {
+    description?: string;
+    onClick: () => void;
+    text: string;
+}
+export declare type OnSort<T> = (sortParams: {
+    sortBy: keyof T;
+    direction: false | SortDirection;
+}) => void;
+export declare type CustomSorted<T> = {
+    [key in keyof T]: false | SortDirection;
+};
+export {};

package/dist/components/newTable/utils.d.ts

@@ -0,0 +1,8 @@
+import { ColumnDef, SortDirection } from '@tanstack/react-table';
+import { CellProps } from './types';
+import { TableProps } from './types';
+interface ColumnsHelperProps<T> extends Omit<TableProps<T>, 'data' | 'uniqueId'> {
+}
+export declare const useColumnsHelper: <T>({ columns, isSelectable, favorites, isFavoritesSortable, onFavoritesChange, toggles, isTogglesSortable, onTogglesChange, rowActions, enableSettings, settingsDropdownConfig, }: ColumnsHelperProps<T>) => ColumnDef<T, CellProps>[];
+export declare const getNextSortingDirection: (direction?: false | SortDirection | undefined) => false | SortDirection;
+export {};

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { PaginationProps } from './types';
+/**
+ * Component Props:
+ * @param {number} pageSize Define the page size to use in every page
+ * @param {number} listSize Define the total size of the list
+ * @param {function} changePageAction Callback called when the user changes the page
+ * @param {function} nextPageAction Callback called on next page button clicked
+ * @param {function} prevPageAction Callback called on previous page button clicked
+ * @param {number} currentPage Used to set the current page number
+ * @param {string} prevText Define previous label text
+ * @param {string} nextText Define next label text
+ */
+declare const Pagination: (props: PaginationProps) => JSX.Element;
+export default Pagination;

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { PaginationProps } from './types';
-export declare const Pagination: (props: PaginationProps) => JSX.Element;
+export { default as Pagination } from './Pagination';
+export { default as paginationPalette } from './paginationPalette';
+export { PaginationPalette } from './types';

package/dist/components/pagination/pagination.stories.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { PaginationProps } from './types';
-export declare const Normal: () => JSX.Element;
+export declare const Template: Story<PaginationProps>;
+export declare const Normal: Story<PaginationProps>;
 declare const PaginationStories: Meta<PaginationProps>;
 export default PaginationStories;

package/dist/components/pagination/paginationPalette.d.ts

@@ -0,0 +1,3 @@
+import { PaginationPalette } from '.';
+declare const paginationPalette: PaginationPalette;
+export default paginationPalette;

package/dist/components/pagination/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const PaginationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PaginationElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PaginationNumberElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PaginationButtonElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/pagination/types.d.ts

@@ -1,3 +1,4 @@
+import { paletteColor } from '../../styles/types';
 export declare type PaginationProps = {
     pageSize: number;
     listSize: number;
@@ -8,3 +9,20 @@ export declare type PaginationProps = {
     prevText: string;
     nextText: string;
 };
+declare type PaginationNumbersStatus = 'normal' | 'hover' | 'active';
+declare type PaginationButtonsStatus = 'normal' | 'disabled';
+export declare type PaginationPalette = {
+    numbers: {
+        [k in PaginationNumbersStatus]: {
+            backgroundColor: paletteColor;
+            color: paletteColor;
+        };
+    };
+    buttons: {
+        [k in PaginationButtonsStatus]: {
+            backgroundColor: paletteColor;
+            color: paletteColor;
+        };
+    };
+};
+export {};

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

@@ -1,2 +1,3 @@
-import Progressbar from './progressbar';
-export { Progressbar };
+export { default as ProgressBar } from './ProgressBar';
+export { ProgressBarProps, ProgressBarPalette, ProgressBarType } from './types';
+export { default as progressBarPalette } from './progressBarPalette';

package/dist/components/progressbar/progressBarPalette.d.ts

@@ -0,0 +1,3 @@
+import { ProgressBarPalette } from '.';
+declare const progressBarPalette: ProgressBarPalette;
+export default progressBarPalette;

package/dist/components/progressbar/progressbar.d.ts

@@ -1,8 +1,9 @@
-import { Component } from 'react';
-import { TProgressbar, UnstyledProgressbarPropsInterface, UnstyledProgressbarStateInterface } from './types';
-export declare class UnstyledProgressbar extends Component<UnstyledProgressbarPropsInterface, UnstyledProgressbarStateInterface> {
-    constructor(props: UnstyledProgressbarPropsInterface);
-    render(): JSX.Element;
-}
-declare const Progressbar: TProgressbar;
-export default Progressbar;
+/// <reference types="react" />
+import { ProgressBarProps } from './types';
+/**
+ * Component Props:
+ * @param {ProgressBarType} color Used to set the colors of the component
+ * @param {number} percentage Numeric value used to set the progress bar percentage value
+ */
+declare const ProgressBar: (props: ProgressBarProps) => JSX.Element;
+export default ProgressBar;

package/dist/components/progressbar/progressbar.stories.d.ts

@@ -1,8 +1,10 @@
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { ComponentProps } from 'react';
-import { Progressbar } from '.';
+import { ProgressBar } from '.';
+import { ProgressBarProps } from './';
+export declare const Template: Story<ProgressBarProps>;
 export declare const Editable: () => JSX.Element;
 export declare const Autocomplete: () => JSX.Element;
 export declare const AllColors: () => JSX.Element;
-declare const ProgressbarStories: Meta<ComponentProps<typeof Progressbar>>;
-export default ProgressbarStories;
+declare const ProgressBarStories: Meta<ComponentProps<typeof ProgressBar>>;
+export default ProgressBarStories;

package/dist/components/progressbar/styled.d.ts

@@ -0,0 +1,3 @@
+import { ProgressBarProps } from './types';
+export declare const ProgressContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ProgressionBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ProgressBarProps, never>;

package/dist/components/progressbar/types.d.ts

@@ -1,11 +1,17 @@
-/// <reference types="react" />
-interface Props {
-    color?: 'blue' | 'green' | 'red' | 'yellow' | 'grey';
-    percentage: number;
-}
-export declare type TProgressbar = React.FunctionComponent<Props>;
-export interface UnstyledProgressbarPropsInterface extends Props {
+import { paletteColor } from '../../styles/types';
+export declare enum ProgressBarType {
+    GREY = "grey",
+    RED = "red",
+    BLUE = "blue",
+    YELLOW = "yellow",
+    GREEN = "green"
 }
-export interface UnstyledProgressbarStateInterface {
+export interface ProgressBarProps {
+    color?: ProgressBarType;
+    percentage: number;
 }
-export {};
+export declare type ProgressBarPalette = {
+    [key in ProgressBarType]: {
+        backgroundColor: paletteColor;
+    };
+};

package/dist/components/table/components/ActionsCell.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Row } from 'react-table';
+import { RowActions, TableData } from '../types';
+interface Props<T extends TableData> {
+    row: Row<T>;
+    actions?: RowActions<T>;
+    renderActions?: () => JSX.Element;
+}
+declare const ActionsCell: <T extends TableData>({ row, actions, renderActions }: Props<T>) => JSX.Element;
+export default ActionsCell;

package/dist/components/table/components/SortIndicator.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    isSorted: boolean;
+    isSortedDesc?: boolean;
+}
+declare const SortIndicator: ({ isSorted, isSortedDesc }: Props) => JSX.Element;
+export default SortIndicator;

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

@@ -0,0 +1,14 @@
+import { Row, UseTableInstanceProps } from 'react-table';
+import { TableData } from '../types';
+interface Props<T extends TableData> {
+    rows: Row<T>[];
+    prepareRow: UseTableInstanceProps<T>['prepareRow'];
+    selectedRowsIds: string[];
+    isLoading: boolean;
+}
+declare const TableBody: <T extends TableData>({ isLoading, rows, prepareRow, selectedRowsIds }: Props<T>) => JSX.Element;
+export interface TableBodyTrProps {
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+export default TableBody;

package/dist/components/table/components/TableFoot.d.ts

@@ -0,0 +1,2 @@
+declare const TableFoot: import("styled-components").StyledComponent<"tfoot", import("styled-components").DefaultTheme, {}, never>;
+export default TableFoot;

package/dist/components/table/components/TableHeader.d.ts

@@ -0,0 +1,7 @@
+import { HeaderGroup } from 'react-table';
+import { TableData } from '../types';
+interface Props<T extends TableData> {
+    headerGroups: HeaderGroup<T>[];
+}
+declare const TableHeader: <T extends TableData>({ headerGroups }: Props<T>) => JSX.Element;
+export default TableHeader;

package/dist/components/table/components/tableBody/TableBodyLoader.d.ts

@@ -0,0 +1,7 @@
+import { ColumnInstance } from 'react-table';
+import { TableData } from '../../types';
+interface Props<T extends TableData> {
+    allColumns: ColumnInstance<T>[];
+}
+declare const TableBodyLoader: <T extends TableData>({ allColumns }: Props<T>) => JSX.Element;
+export default TableBodyLoader;

package/dist/components/table/components/tableBody/styled.d.ts

@@ -0,0 +1,3 @@
+import { TableBodyTrStyles } from '../../utils';
+import { TableBodyTrProps } from '../TableBody';
+export declare const TableBodyTr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, import("../tableParts/styled").TrProps & TableBodyTrStyles & TableBodyTrProps, keyof TableBodyTrStyles>;

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

@@ -1,3 +1,4 @@
-import ShortcutTip from './shortcutTip';
-import Tip from './tip';
-export { Tip, ShortcutTip };
+export { default as ShortcutTip } from './ShortcutTip';
+export { default as Tip } from './Tip';
+export { ShortcutTipProps, TipProps, TipPalette, TipType } from './types';
+export { default as tipPalette } from './tipPalette';

package/dist/components/tip/shortcutTip.d.ts

@@ -1,4 +1,15 @@
 /// <reference types="react" />
 import { ShortcutTipProps } from './types';
-declare const ShortcutTip: (props: ShortcutTipProps) => JSX.Element;
+/**
+ * Component Props:
+ * @param {string} className To support styled-components customization
+ * @param {IconProps} closeIcon Configuration of the right icon, not rendered if onClose is not set
+ * @param {IconProps} leftIcon Configuration of the left icon
+ * @param {function} onClose Callback called on right icon click
+ * @param {function} renderCloseIcon Used to render a custom component instead of the right icon, not called if onClose is not set
+ * @param {string} shortcut Render a bold text beside the main text
+ * @param {string} text Component main text
+ * @param {TipType} type Used to set style and colors of the component among those present in the palette
+ */
+declare const ShortcutTip: ({ shortcut, text, ...rest }: ShortcutTipProps) => JSX.Element;
 export default ShortcutTip;

package/dist/components/tip/styled.d.ts

@@ -0,0 +1,5 @@
+import { TipWrapperProps } from './types';
+export declare const TipWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TipWrapperProps, never>;
+export declare const TipLeftIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const TipText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const TipCloseIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/tip/tip.d.ts

@@ -1,4 +1,14 @@
 /// <reference types="react" />
 import { TipProps } from './types';
-declare const Tip: (props: TipProps) => JSX.Element;
+/**
+ * Component Props:
+ * @param {string} className To support styled-components customization
+ * @param {IconProps} closeIcon Configuration of the right icon, not rendered if onClose is not set
+ * @param {IconProps} leftIcon Configuration of the left icon
+ * @param {function} onClose Callback called on right icon click
+ * @param {function} renderCloseIcon Used to render a custom component instead of the right icon, not called if onClose is not set
+ * @param {string|ReactNode} text Component main content
+ * @param {TipType} type Used to set style and colors of the component among those present in the palette
+ */
+declare const Tip: ({ className, closeIcon, leftIcon, onClose, renderCloseIcon, text, type }: TipProps) => JSX.Element;
 export default Tip;

package/dist/components/tip/tip.stories.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
-import { TipProps } from './types';
-export declare const Normal: () => JSX.Element;
-export declare const Premade: () => JSX.Element;
+import { Meta, Story } from '@storybook/react';
+import { ShortcutTipProps, TipProps } from './types';
+export declare const Normal: Story<TipProps>;
+export declare const Shortcut: Story<ShortcutTipProps>;
 declare const TipStories: Meta<TipProps>;
 export default TipStories;

package/dist/components/tip/tipPalette.d.ts

@@ -0,0 +1,3 @@
+import { TipPalette } from '.';
+declare const tipPalette: TipPalette;
+export default tipPalette;

package/dist/components/tip/types.d.ts

@@ -1,15 +1,33 @@
-import { ReactNode } from 'react';
+import { ReactChild } from 'react';
+import { paletteColor } from '../..';
 import { IconProps } from '../icon';
+export declare enum TipType {
+    STANDARD = "standard",
+    ERROR = "error",
+    INFO = "info",
+    WARNING = "warning",
+    SUCCESS = "success"
+}
+export interface TipWrapperProps {
+    className?: string;
+    type: TipType;
+}
 export interface TipProps {
-    text: string | ReactNode;
+    className?: string;
+    closeIcon?: IconProps;
     leftIcon?: IconProps;
     onClose?: () => void;
-    closeIcon?: IconProps;
     renderCloseIcon?: () => JSX.Element;
-    renderIcon?: () => JSX.Element;
-    className?: string;
+    text: ReactChild;
+    type?: TipType;
 }
+export declare type TipPalette = {
+    [key in TipType]: {
+        color: paletteColor;
+        backgroundColor: paletteColor;
+    };
+};
 export interface ShortcutTipProps extends Omit<TipProps, 'text'> {
-    text: string;
     shortcut: string;
+    text: string;
 }