@connectif/ui-components 0.0.1 → 0.0.2

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

@@ -1,14 +0,0 @@
-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/src/components/chip/MenuChip.d.ts

@@ -1,56 +0,0 @@
-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, "anchorHorizontalOrigin" | "horizontalAlign"> & {
-    /**
-     * 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/src/components/chip/index.d.ts

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

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

@@ -1,54 +0,0 @@
-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/src/components/dialog/Dialog.d.ts

@@ -1,16 +0,0 @@
-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/src/components/dialog/index.d.ts

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

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

@@ -1,18 +0,0 @@
-/// <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/src/components/divider/index.d.ts

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

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

@@ -1,9 +0,0 @@
-/// <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/src/components/drawer/InputDrawer.d.ts

@@ -1,41 +0,0 @@
-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/src/components/drawer/index.d.ts

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

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

@@ -1,13 +0,0 @@
-/// <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/src/components/formatter/CurrencyFormatter.d.ts

@@ -1,21 +0,0 @@
-/// <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/src/components/formatter/DateFormatter.d.ts

@@ -1,18 +0,0 @@
-/// <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/src/components/formatter/NumberFormatter.d.ts

@@ -1,17 +0,0 @@
-/// <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/src/components/formatter/PercentageFormatter.d.ts

@@ -1,17 +0,0 @@
-/// <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/src/components/formatter/index.d.ts

@@ -1,5 +0,0 @@
-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/src/components/header/Header.d.ts

@@ -1,33 +0,0 @@
-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/src/components/header/HeaderSubtitle.d.ts

@@ -1,13 +0,0 @@
-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/src/components/header/HeaderTitle.d.ts

@@ -1,13 +0,0 @@
-/// <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/src/components/header/index.d.ts

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

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

@@ -1,47 +0,0 @@
-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?: "XXS" | "XS" | "S" | "M" | "L" | "XL" | "XXL" | undefined;
-    /**
-     * Classes of this icon
-     */
-    className?: string | undefined;
-} & React.RefAttributes<SVGSVGElement>>;
-export default Icon;

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

@@ -1,13 +0,0 @@
-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/src/components/icon/SvgIcon.theme.d.ts

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