@connectif/ui-components 0.0.1

package/dist/components/chip/ChipList.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ChipProps } from './Chip';
+export type ChipListProps = React.PropsWithChildren<{
+    /**
+     * The chips to display.
+     */
+    chips: ChipProps[];
+}>;
+/**
+ * Shows a list of chips, in a horizontal layout.
+ * If chips doesn't fit in the available space, they will be overflow to multiline.
+ */
+declare const ChipList: ({ chips }: ChipListProps) => JSX.Element;
+export default ChipList;

package/dist/components/chip/MenuChip.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { ChipProps } from './Chip';
+import { PopoverProps } from '../popover';
+export type MenuChipProps = Omit<ChipProps, 'children' | 'component'> & Pick<PopoverProps, 'anchorHorizontalOrigin' | 'horizontalAlign'> & {
+    /**
+     * The list of menu items to display.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the menu is opened or not.
+     */
+    isOpen?: boolean;
+    /**
+     * To remove the icon on menu chip.
+     * @default false
+     */
+    removeIcon?: boolean;
+    /**
+     * To show menu on the top of de chip.
+     * @default bottom
+     */
+    placement?: 'top' | 'bottom';
+    /**
+     * Called when the menuChip is closed by Escape key, Tab key or click outside.
+     */
+    onClose?: (reason: 'backdropClick' | 'escapeKeyDown' | 'tabKeyDown') => void;
+};
+/**
+ * A component that displays a Chip with a menu.
+ * An invisible overlay is displayed on top of the page to close menu if clicked outside.
+ */
+declare const MenuChip: React.ForwardRefExoticComponent<Omit<ChipProps, "children" | "component"> & Pick<PopoverProps, "horizontalAlign" | "anchorHorizontalOrigin"> & {
+    /**
+     * The list of menu items to display.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the menu is opened or not.
+     */
+    isOpen?: boolean | undefined;
+    /**
+     * To remove the icon on menu chip.
+     * @default false
+     */
+    removeIcon?: boolean | undefined;
+    /**
+     * To show menu on the top of de chip.
+     * @default bottom
+     */
+    placement?: "bottom" | "top" | undefined;
+    /**
+     * Called when the menuChip is closed by Escape key, Tab key or click outside.
+     */
+    onClose?: ((reason: 'backdropClick' | 'escapeKeyDown' | 'tabKeyDown') => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default MenuChip;

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

@@ -0,0 +1,3 @@
+export { default as Chip, ChipProps } from './Chip';
+export { default as ChipList, ChipListProps } from './ChipList';
+export { default as MenuChip, MenuChipProps } from './MenuChip';

package/dist/components/dialog/ConfirmationDialog.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { DialogProps } from './Dialog';
+export type ConfirmationDialogVariant = 'primary' | 'warning';
+export type ConfirmationDialogProps = Pick<DialogProps, 'title' | 'open' | 'children' | 'TransitionProps' | 'size' | 'fullScreen'> & {
+    /**
+     * Text to override the accept button default text
+     */
+    acceptText?: string;
+    /**
+     * Text to override the cancel button default text
+     */
+    cancelText?: string;
+    /**
+     * Manages disabled prop for confirm button.
+     */
+    acceptButtonDisabled?: boolean;
+    /**
+     * Tooltip displayed when accept button is disabled.
+     */
+    acceptButtonDisabledTooltipText?: string;
+    /**
+     * Select the variant of the component
+     */
+    variant?: ConfirmationDialogVariant;
+    /**
+     * Children above confirmation buttons
+     */
+    footerChildren?: React.ReactNode;
+    /**
+     * Children to the left of the buttons
+     */
+    buttonsLeftChildren?: React.ReactNode;
+    /**
+     * When true, show borders in header and footer. Default false
+     */
+    displayBorders?: boolean;
+    /**
+     * When true, hide cancel button. Default false
+     */
+    hideCancelButton?: boolean;
+    /**
+     * Callback when cancel button is clicked
+     */
+    onCancel?: () => void;
+    /**
+     * Callback when accept button is clicked
+     */
+    onAccept?: () => void;
+};
+/**
+ * A dialog component to make a confirmation.
+ */
+declare const ConfirmationDialog: ({ onCancel, onAccept, acceptText, cancelText, acceptButtonDisabled, acceptButtonDisabledTooltipText, variant, children, footerChildren, buttonsLeftChildren, displayBorders, hideCancelButton, ...rest }: ConfirmationDialogProps) => JSX.Element;
+export default ConfirmationDialog;

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { DialogProps as MuiDialogProps } from '@mui/material';
+export type DialogProps = Pick<MuiDialogProps, 'open' | 'sx' | 'children' | 'TransitionProps' | 'fullScreen'> & {
+    /**
+     * The title of the Dialog
+     */
+    title: string | React.ReactNode;
+    size?: 'S' | 'M' | 'L' | 'XL' | 'XXL';
+    noPadding?: boolean;
+    noPaddingTitle?: boolean;
+    wrapChildren?: boolean;
+    closeable?: boolean;
+    onClose: () => void;
+};
+declare const Dialog: ({ title, sx, open, children, size, noPadding, noPaddingTitle, fullScreen, wrapChildren, closeable, onClose, ...rest }: DialogProps) => JSX.Element;
+export default Dialog;

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

@@ -0,0 +1,2 @@
+export { default as Dialog, DialogProps } from './Dialog';
+export { default as ConfirmationDialog, ConfirmationDialogProps } from './ConfirmationDialog';

package/dist/components/divider/Divider.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { DividerProps as MuiDividerProps } from '@mui/material';
+export type DividerProps = Pick<MuiDividerProps, 'orientation' | 'flexItem' | 'sx'> & {
+    /**
+     * The variant to use for the divider.
+     */
+    variant?: 'fullWidth' | 'middle';
+    /**
+     * The color of the divider. By default, the divider will use the color of
+     * grey300
+     */
+    color?: string;
+};
+/**
+ * A divider component to show a thin line to divide sections, paragraphs or anything.
+ */
+declare const Divider: ({ sx, variant, color, ...rest }: DividerProps) => JSX.Element;
+export default Divider;

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

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

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DrawerProps as MuiDrawerProps } from '@mui/material/Drawer';
+export type DrawerProps = Omit<MuiDrawerProps, 'anchor'>;
+/**
+ * Navigation drawers (or "sidebars") provide access to destinations and app functionality, such as switching accounts.
+ * They can either be permanently on-screen or controlled by a navigation menu icon.
+ */
+declare const Drawer: ({ ...props }: DrawerProps) => JSX.Element;
+export default Drawer;

package/dist/components/drawer/InputDrawer.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { DrawerProps } from './Drawer';
+export type InputDrawerProps = {
+    /**
+     * If `true`, the component is shown.
+     * @default false
+     */
+    open: DrawerProps['open'];
+    /**
+     * Function to close drawer
+     */
+    close: () => void;
+    /**
+     * Callback fired when the component requests to be closed.
+     *
+     * @param {object} event The event source of the callback.
+     */
+    onClose?: DrawerProps['onClose'];
+    /**
+     * Title of he drawer to display.
+     */
+    title: string;
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The buttons on the bot right. Add them as React.Fragment
+     * https://reactjs.org/docs/fragments.html
+     */
+    buttons: JSX.Element;
+    /**
+     * Text to display in the cancel button.
+     */
+    cancelButtonText: string;
+};
+/**
+ * Custom Drawer with an icon, tittle and subtitle.
+ */
+declare const InputDrawer: ({ open, close, onClose, title, children, buttons, cancelButtonText }: InputDrawerProps) => JSX.Element;
+export default InputDrawer;

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

@@ -0,0 +1,2 @@
+export { default as Drawer, DrawerProps } from './Drawer';
+export { default as InputDrawer, InputDrawerProps } from './InputDrawer';

package/dist/components/formatter/CompactNumberFormatter.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export type CompactNumberFormatterProps = {
+    /**
+     * Number to format
+     */
+    value: number;
+};
+/**
+ * Formats a number to a shorten format like 1.5K or 4.5M.
+ * It will use locale from the context.
+ */
+declare const CompactNumberFormatter: ({ value }: CompactNumberFormatterProps) => JSX.Element;
+export default CompactNumberFormatter;

package/dist/components/formatter/CurrencyFormatter.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export type CurrencyFormatterProps = {
+    /**
+     * Amount to format
+     */
+    value: number;
+    /**
+     * Notation to use
+     */
+    notation?: 'compact';
+    /**
+     * Ignore context Currency and use this one instead
+     */
+    currency?: string;
+};
+/**
+ * Component to format any currency amount.
+ * It will use locale and currency from the context.
+ */
+declare const CurrencyFormatter: ({ value, notation, currency }: CurrencyFormatterProps) => JSX.Element;
+export default CurrencyFormatter;

package/dist/components/formatter/DateFormatter.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { DateTimeFormat } from '../../utils';
+export type DateFormatterProps = {
+    /**
+     * Date to format
+     */
+    date: Date;
+    /**
+     * Format to use
+     */
+    format?: DateTimeFormat;
+};
+/**
+ * Component to format any date to the given format.
+ * It will use locale and timezone from the context.
+ */
+declare const DateFormatter: ({ date, format }: DateFormatterProps) => JSX.Element;
+export default DateFormatter;

package/dist/components/formatter/NumberFormatter.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export type NumberFormatterProps = {
+    /**
+     * Number to format
+     */
+    value: number;
+    /**
+     * Quantity of decimals to use
+     */
+    fractionSize?: number;
+};
+/**
+ * Component to format any number.
+ * It will use locale from the context.
+ */
+declare const NumberFormatter: ({ value, fractionSize }: NumberFormatterProps) => JSX.Element;
+export default NumberFormatter;

package/dist/components/formatter/PercentageFormatter.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export type PercentageFormatterProps = {
+    /**
+     * Value to format
+     */
+    value: number;
+    /**
+     * Quantity of decimals to use
+     */
+    fractionSize?: 0 | 1 | 2 | 3;
+};
+/**
+ * Component to format any currency amount.
+ * It will use locale and currency from the context.
+ */
+declare const PercentageFormatter: ({ value, fractionSize }: PercentageFormatterProps) => JSX.Element;
+export default PercentageFormatter;

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

@@ -0,0 +1,5 @@
+export { default as CompactNumberFormatter, CompactNumberFormatterProps } from './CompactNumberFormatter';
+export { default as CurrencyFormatter, CurrencyFormatterProps } from './CurrencyFormatter';
+export { default as DateFormatter, DateFormatterProps } from './DateFormatter';
+export { default as NumberFormatter, NumberFormatterProps } from './NumberFormatter';
+export { default as PercentageFormatter, PercentageFormatterProps } from './PercentageFormatter';

package/dist/components/header/Header.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { IconId } from '../icon';
+export type HeaderProps = React.PropsWithChildren<{
+    /**
+     * Text to be shown as title
+     */
+    title: string;
+    /**
+     * Text to be shown as subtitle
+     */
+    subtitle?: React.ReactNode;
+    /**
+     *  The iconId to be shown as icon before title
+     */
+    iconId?: IconId;
+    /**
+     * If isElevated is true, header will have a box-shadow at the bottom, so it will
+     * looks like if header is elevated over the rest of the page.
+     */
+    isElevated?: boolean;
+    /**
+     * Actions to show along with the header text.
+     */
+    actions?: React.ReactNode;
+}>;
+/**
+ * A Header to be used within PageWithHeader component.
+ * If PageWithHeader component (parent) is scrolled on its body, this header will
+ * automatically looks like elevated (the same than `isElevated={true}`).
+ * If title gets truncated (with ellipsis), a Tooltip will be shown (using TextEllipsisTooltip component)
+ */
+declare const Header: ({ title, subtitle, iconId, isElevated, actions, children }: HeaderProps) => JSX.Element;
+export default Header;

package/dist/components/header/HeaderSubtitle.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type HeaderSubtitleProps = {
+    /**
+     * The text to display.
+     */
+    text: React.ReactNode;
+};
+/**
+ * The subtitle for a Header component. It automatically handles show a tooltip if the subtitle
+ * gets clipped with ellipsis
+ */
+declare const HeaderSubtitle: ({ text }: HeaderSubtitleProps) => JSX.Element;
+export default HeaderSubtitle;

package/dist/components/header/HeaderTitle.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export type HeaderTitleProps = {
+    /**
+     * The title to display.
+     */
+    text: string;
+};
+/**
+ * The title for a Header component. It automatically handles show a tooltip if the title
+ * gets clipped with ellipsis
+ */
+declare const HeaderTitle: ({ text }: HeaderTitleProps) => JSX.Element;
+export default HeaderTitle;

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

@@ -0,0 +1,3 @@
+export { default as Header, HeaderProps } from './Header';
+export { default as HeaderTitle, HeaderTitleProps } from './HeaderTitle';
+export { default as HeaderSubtitle, HeaderSubtitleProps } from './HeaderSubtitle';

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { SvgIconProps } from '@mui/material';
+import { icons } from './icons';
+export declare const iconSizes: {
+    readonly XXS: 12;
+    readonly XS: 16;
+    readonly S: 20;
+    readonly M: 24;
+    readonly L: 40;
+    readonly XL: 48;
+    readonly XXL: 72;
+};
+export type IconId = keyof typeof icons;
+export type IconProps = Pick<SvgIconProps, 'sx'> & {
+    /**
+     * The ID of the icon to display.
+     */
+    id: IconId;
+    /**
+     * The size of the icon to display.
+     */
+    size?: 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL';
+    /**
+     * Classes of this icon
+     */
+    className?: string;
+};
+/**
+ * A component that displays an icon.
+ * By default, this components renders the icon with the `currentColor` fill.
+ * It can be customized with a CSS style.
+ */
+declare const Icon: React.ForwardRefExoticComponent<Pick<SvgIconProps, "sx"> & {
+    /**
+     * The ID of the icon to display.
+     */
+    id: IconId;
+    /**
+     * The size of the icon to display.
+     */
+    size?: "M" | "L" | "XXS" | "XS" | "S" | "XL" | "XXL" | undefined;
+    /**
+     * Classes of this icon
+     */
+    className?: string | undefined;
+} & React.RefAttributes<SVGSVGElement>>;
+export default Icon;

package/dist/components/icon/StackedIcons.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { IconProps } from './Icon';
+export type StackedIconsProps = {
+    /**
+     * List of icons to stack. Maximum 3.
+     */
+    children: React.ReactElement<IconProps>[];
+};
+/**
+ * Stack 2 or 3 icons together one over the other and slightly moved to the right.
+ */
+declare const StackedIcons: ({ children }: StackedIconsProps) => JSX.Element;
+export default StackedIcons;

package/dist/components/icon/SvgIcon.theme.d.ts

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