@livechat/design-system-react-components 1.0.0-alpha.2 → 1.0.0-alpha.22

package/dist/src/components/Modal/ModalBase.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface ModalBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    onClose(): void;
+    closeOnEscPress?: boolean;
+}
+export declare const ModalBase: React.FC<ModalBaseProps>;

package/dist/src/components/Modal/ModalCloseButton.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare type ModalCloseButtonProps = React.HTMLAttributes<HTMLButtonElement>;
+export declare const ModalCloseButton: React.FC<ModalCloseButtonProps>;

package/dist/src/components/Modal/ModalPortal.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface ModalPortalProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    zIndex: number;
+    parentElementName?: string;
+}
+export declare const ModalPortal: React.FC<ModalPortalProps>;

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

@@ -0,0 +1,10 @@
+export { ActionModal } from './ActionModal';
+export { Modal } from './Modal';
+export { ModalBase } from './ModalBase';
+export { ModalCloseButton } from './ModalCloseButton';
+export { ModalPortal } from './ModalPortal';
+export type { ActionModalProps } from './ActionModal';
+export type { ModalProps } from './Modal';
+export type { ModalBaseProps } from './ModalBase';
+export type { ModalCloseButtonProps } from './ModalCloseButton';
+export type { ModalPortalProps } from './ModalPortal';

package/dist/src/components/NumericInput/NumericInput.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+interface Props {
+    className?: string;
+    error?: string;
+    value: string;
+    max?: number;
+    min?: number;
+    disabled?: boolean;
+    noControls?: boolean;
+    onChange: (value: string) => void;
+}
+export declare type NumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & Props;
+export declare const NumericInput: React.FC<NumericInputProps>;
+export {};

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

@@ -0,0 +1 @@
+export { NumericInput } from './NumericInput';

package/dist/src/components/Picker/Picker.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { TriggerSize } from './Trigger';
+import { IPickerListItem } from './PickerList';
+export interface IPickerProps {
+    disabled?: boolean;
+    label?: string;
+    error?: string;
+    options: IPickerListItem[];
+    selectedOption?: IPickerListItem;
+    size?: TriggerSize;
+    placeholder?: string;
+    isRequired?: boolean;
+    noSearchResultText?: string;
+    searchDisabled?: boolean;
+    onSelect: (selectedItem: IPickerListItem | null) => void;
+}
+export declare const Picker: React.FC<IPickerProps>;

package/dist/src/components/Picker/PickerList.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { TriggerSize } from './Trigger';
+export interface IPickerListItem {
+    key: string;
+    name: string;
+    groupHeader?: boolean;
+    disabled?: boolean;
+}
+export interface IPickerListProps {
+    isOpen: boolean;
+    items: IPickerListItem[];
+    selectedItem: IPickerListItem | null;
+    size?: TriggerSize;
+    emptyStateText?: string;
+    onClose: () => void;
+    onSelect: (item: IPickerListItem) => void;
+}
+export declare const PickerList: React.FC<IPickerListProps>;

package/dist/src/components/Picker/Trigger.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export declare type TriggerSize = 'compact' | 'medium' | 'large';
+export interface ITriggerProps {
+    isSearchDisabled: boolean;
+    isDisabled?: boolean;
+    isError?: boolean;
+    isItemSelected: boolean;
+    isOpen: boolean;
+    isRequired?: boolean;
+    size?: TriggerSize;
+    onClick: () => void;
+    onClearClick: () => void;
+    onFilter: (text: string) => void;
+}
+export declare const Trigger: React.FC<ITriggerProps>;

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

@@ -0,0 +1 @@
+export * from './Picker';

package/dist/src/components/Popover/Popover.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Placement } from '@floating-ui/react-dom';
+export interface IPopoverProps {
+    children?: React.ReactNode;
+    className?: string;
+    placement?: Placement;
+    isVisible?: boolean;
+    triggerRenderer: () => React.ReactNode;
+}
+export declare const Popover: React.FC<IPopoverProps>;

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

@@ -0,0 +1 @@
+export * from './Popover';

package/dist/{components → src/components/Progress}/ProgressBar.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { ProgressSize, ProgressStatus } from './constants';
-export interface IProps {
-    className?: string;
-    percent: number;
-    status?: ProgressStatus;
-    size?: ProgressSize;
-}
-export declare const ProgressBar: React.ExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>;
+import * as React from 'react';
+import { ProgressSize, ProgressStatus } from './constants';
+export interface ProgressBarProps {
+    className?: string;
+    percent: number;
+    status?: ProgressStatus;
+    size?: ProgressSize;
+}
+export declare const ProgressBar: React.ExoticComponent<ProgressBarProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/Progress/ProgressCircle.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ProgressSize, ProgressStatus } from './constants';
+export interface ProgressCircleProps {
+    className?: string;
+    progressValue: number;
+    status?: ProgressStatus;
+    size?: ProgressSize;
+}
+export declare const ProgressCircle: React.ExoticComponent<ProgressCircleProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/Progress/constants.d.ts

@@ -0,0 +1,4 @@
+export declare type ProgressStatus = 'normal' | 'error' | 'success';
+export declare type ProgressSize = 'small' | 'medium' | 'large';
+export declare const PROGRESS_STATUSES: ProgressStatus[];
+export declare const PROGRESS_SIZES: ProgressSize[];

package/dist/{components → src/components/Progress}/helpers.d.ts

@@ -1,3 +1,3 @@
-import { ProgressStatus } from './constants';
-export declare function getPercentNumber(status: ProgressStatus, percent?: number): number;
-export declare function getProgressStatus(status: ProgressStatus, percent: number): ProgressStatus;
+import { ProgressStatus } from './constants';
+export declare function getPercentNumber(status: ProgressStatus, percent?: number): number;
+export declare function getProgressStatus(status: ProgressStatus, percent: number): ProgressStatus;

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

@@ -0,0 +1,2 @@
+export { ProgressCircle } from './ProgressCircle';
+export { ProgressBar } from './ProgressBar';

package/dist/{components → src/components/PromoBanner}/PromoBanner.d.ts

@@ -1,19 +1,13 @@
-import * as React from 'react';
-export declare enum PromoBannerSize {
-    Small = "small",
-    Medium = "medium",
-    Large = "large"
-}
-export interface IPromoBannerProps {
-    className?: string;
-    buttonText?: string;
-    header: string;
-    img?: string;
-    light?: boolean;
-    linkText?: string;
-    size?: PromoBannerSize;
-    onButtonClick?: () => void;
-    onClose?: () => void;
-    onLinkClick?: () => void;
-}
-export declare const PromoBanner: React.FC<IPromoBannerProps>;
+import * as React from 'react';
+export interface PromoBannerProps {
+    className?: string;
+    buttonText?: string;
+    header: string;
+    img?: string;
+    light?: boolean;
+    linkText?: string;
+    onButtonClick?: () => void;
+    onClose?: () => void;
+    onLinkClick?: () => void;
+}
+export declare const PromoBanner: React.FC<PromoBannerProps>;

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

@@ -0,0 +1 @@
+export { PromoBanner } from './PromoBanner';

package/dist/src/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface RadioButtonProps extends React.HTMLAttributes<HTMLInputElement> {
+    description?: string;
+    checked?: boolean;
+    disabled?: boolean;
+}
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1 @@
+export { RadioButton } from './RadioButton';

package/dist/src/components/Search/Search.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export declare const enum SearchSize {
+    Compact = "compact",
+    Medium = "medium",
+    Large = "large"
+}
+export interface ISearchInputProps {
+    isCollapsable?: boolean;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    placeholder?: string;
+    size?: SearchSize;
+    value?: string;
+    onChange: (value: string) => void;
+}
+export declare const SearchInput: React.FC<ISearchInputProps>;

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

@@ -0,0 +1 @@
+export { SearchInput } from './Search';

package/dist/{components → src/components/Switch}/Switch.d.ts

@@ -1,17 +1,16 @@
-import * as React from 'react';
-declare enum SwitchSize {
-    Basic = "basic",
-    Compact = "compact"
-}
-export interface IProps {
-    className?: string;
-    defaultOn?: boolean;
-    disabled?: boolean;
-    innerRef?: React.LegacyRef<HTMLInputElement> | undefined;
-    name?: string;
-    on?: boolean;
-    onChange?(e: React.FormEvent, value: boolean): void;
-    size?: SwitchSize;
-}
-export declare const Switch: React.FC<IProps>;
-export {};
+import * as React from 'react';
+export declare const baseClass = "switch";
+export declare type SwitchSize = 'compact' | 'medium' | 'large';
+export declare type SwitchState = 'regular' | 'loading' | 'locked';
+export interface SwitchProps {
+    className?: string;
+    defaultOn?: boolean;
+    disabled?: boolean;
+    innerRef?: React.LegacyRef<HTMLInputElement> | undefined;
+    name?: string;
+    on?: boolean;
+    onChange?(e: React.FormEvent, value: boolean): void;
+    size?: SwitchSize;
+    state?: SwitchState;
+}
+export declare const Switch: React.FC<SwitchProps>;

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

@@ -0,0 +1 @@
+export { Switch } from './Switch';

package/dist/{components → src/components/Tab}/Tab.d.ts

@@ -1,12 +1,12 @@
-import * as React from 'react';
-declare type HTMLProps = (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    href: string;
-}) | (React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    href?: never;
-});
-export declare type ITabProps = HTMLProps & {
-    description?: React.ReactNode;
-    isSelected?: boolean;
-};
-export declare const Tab: React.FC<ITabProps>;
-export {};
+import * as React from 'react';
+declare type HTMLProps = (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+}) | (React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never;
+});
+export declare type TabProps = HTMLProps & {
+    description?: React.ReactNode;
+    isSelected?: boolean;
+};
+export declare const Tab: React.FC<TabProps>;
+export {};

package/dist/{components → src/components/Tab}/TabsWrapper.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
-export declare const TabsWrapper: React.FC<React.HTMLAttributes<HTMLDivElement>>;
-export declare const TabsList: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+import * as React from 'react';
+export declare const TabsWrapper: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export declare const TabsList: React.FC<React.HTMLAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export * from './Tab';
+export * from './TabsWrapper';

package/dist/src/components/Tag/Tag.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
+    kind?: 'default' | 'info' | 'warning' | 'success' | 'error';
+    size?: 'medium' | 'large';
+    customColor?: string;
+    dismissible?: boolean;
+    outline?: boolean;
+    onRemove?(): void;
+    icon?: React.FC<React.SVGProps<SVGSVGElement>> | string;
+    avatar?: string;
+}
+export declare const Tag: React.FC<TagProps>;

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

@@ -0,0 +1 @@
+export { Tag } from './Tag';

package/dist/src/components/TagInput/EditableTag.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface EditableTagProps extends React.HTMLAttributes<HTMLDivElement> {
+    inputRef: React.RefObject<HTMLInputElement>;
+    index: number;
+    update: (idx: number, value: string) => void;
+    remove: (idx: number) => void;
+    validator?: (val: string) => boolean;
+    children: string;
+    size: 'medium' | 'large';
+}
+export declare const EditableTag: React.FC<EditableTagProps>;

package/dist/src/components/TagInput/EditableTagContent.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface EditableTagContentProps {
+    value: string;
+    className?: string;
+    innerEditableRef: React.RefObject<HTMLDivElement>;
+    inputRef: React.RefObject<HTMLInputElement>;
+    change: (value: string) => void;
+    remove: () => void;
+    validator?: (value: string) => boolean;
+}
+export declare const EditableTagContent: React.FC<EditableTagContentProps>;

package/dist/src/components/TagInput/EmailTagInput.d.ts

@@ -0,0 +1,5 @@
+import { TagInputProps } from './TagInput';
+import * as React from 'react';
+export declare type EmailTagInputProps = Omit<TagInputProps, 'validator'>;
+export declare const emailRegex: RegExp;
+export declare const EmailTagInput: React.FC<EmailTagInputProps>;

package/dist/src/components/TagInput/TagInput.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+declare type Tags = string[];
+export interface TagInputProps {
+    error?: string;
+    tags?: Tags;
+    onChange: (tags: Tags) => void;
+    placeholder?: string;
+    validator?: (val: string) => boolean;
+    size?: 'medium' | 'large';
+}
+export declare const TagInput: React.FC<TagInputProps>;
+export {};

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

@@ -0,0 +1,4 @@
+export { TagInput } from './TagInput';
+export type { TagInputProps } from './TagInput';
+export { EmailTagInput } from './EmailTagInput';
+export type { EmailTagInputProps } from './EmailTagInput';

package/dist/src/components/Toast/Toast.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+declare type ToastKind = 'success' | 'warning' | 'error' | 'info';
+declare type ToastAction = {
+    onClick: () => void;
+    label: string;
+    closesOnClick?: boolean;
+};
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+    action?: ToastAction;
+    className?: string;
+    removable?: boolean;
+    kind?: ToastKind;
+    onClose?: () => void;
+}
+export declare const Toast: React.FC<ToastProps>;
+export {};

package/dist/src/components/Toast/ToastWrapper.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ToastProps, Toast } from './Toast';
+declare type HorizontalPosition = 'left' | 'center' | 'right';
+declare type VerticalPosition = 'top' | 'bottom';
+export declare const ANIMATION_TIME = 200;
+interface Toast extends ToastProps {
+    id: string;
+    content: React.ReactElement | string;
+}
+export interface ToastWrapperProps {
+    className?: string;
+    toasts: Toast[];
+    fixed?: boolean;
+    block?: boolean;
+    animationType?: string;
+    verticalPosition?: VerticalPosition;
+    horizontalPosition?: HorizontalPosition;
+}
+export declare const ToastWrapper: React.FC<ToastWrapperProps>;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './Toast';
+export * from './ToastWrapper';

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export declare const Info: React.FC<{
+    header: string;
+    text: string;
+    closeWithX?: boolean;
+    theme?: string;
+    handleCloseAction?: (ev: React.MouseEvent) => void;
+}>;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export declare const Interactive: React.FC<{
+    header: string;
+    text: string;
+    image?: {
+        src: string;
+        alt: string;
+    };
+    closeWithX?: boolean;
+    theme?: 'invert' | 'important';
+    handleClickPrimary: () => void;
+    handleClickSecondary: () => void;
+    handleCloseAction?: (ev: React.MouseEvent) => void;
+}>;

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const Simple: React.FC<{
+    text: string;
+}>;

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

@@ -0,0 +1,7 @@
+declare const SpotlightOverlay: ({ gap, isVisible, slide, disablePointerEvents, }: {
+    gap: DOMRect | null;
+    isVisible: boolean;
+    slide: boolean;
+    disablePointerEvents: boolean;
+}) => JSX.Element | null;
+export default SpotlightOverlay;

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Placement, VirtualElement } from '@floating-ui/react-dom';
+export interface ITooltipProps {
+    children?: React.ReactNode;
+    className?: string;
+    theme?: 'invert' | 'important' | undefined;
+    placement?: Placement;
+    isVisible?: boolean;
+    withFadeAnimation?: boolean;
+    transitionDuration?: number;
+    transitionDelay?: number;
+    hoverOutDelayTimeout?: number;
+    offsetMainAxis?: number;
+    triggerOnClick?: boolean;
+    arrowOffsetY?: number;
+    arrowOffsetX?: number;
+    triggerRenderer: () => React.ReactNode;
+    referenceElement?: VirtualElement;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+export declare const Tooltip: React.FC<ITooltipProps>;

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ModalPortalProps } from '../Modal/';
+import { ITooltipProps } from './Tooltip';
+interface IOwnProps {
+    shouldSlide?: boolean;
+    className?: string;
+    disableSpotlightPointerEvents?: boolean;
+}
+interface IUserGuide extends IOwnProps, ITooltipProps, Omit<ModalPortalProps, 'children'> {
+}
+export declare const UserGuide: React.FC<IUserGuide>;
+export {};

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

@@ -0,0 +1,2 @@
+import { IconKind } from '../Icon';
+export declare function getIconType(theme: string): IconKind;

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

@@ -0,0 +1,5 @@
+export { Tooltip } from './Tooltip';
+export { Simple } from './Simple';
+export { Info } from './Info';
+export { Interactive } from './Interactive';
+export { UserGuide } from './UserGuide';

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

@@ -0,0 +1,9 @@
+export default class VirtualReference {
+    element: Element;
+    padding: number;
+    constructor(element: Element, padding: number);
+    addPadding(rect: DOMRect): Omit<DOMRect, 'toJSON'>;
+    getBoundingClientRect(): Omit<DOMRect, 'toJSON'>;
+    get clientWidth(): number;
+    get clientHeight(): number;
+}

package/dist/{components → src/components/Typography}/Heading.d.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
-declare type TSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-interface IProps {
-    size?: TSize;
-    /** DOM element name that will be rendered */
-    as?: string;
-    /** Optional custom className */
-    className?: string;
-}
-export declare const Heading: React.FC<IProps>;
-export {};
+import * as React from 'react';
+declare type TSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+interface IProps {
+    size?: TSize;
+    /** DOM element name that will be rendered */
+    as?: string;
+    /** Optional custom className */
+    className?: string;
+}
+export declare const Heading: React.FC<IProps>;
+export {};

package/dist/{components → src/components/Typography}/Text.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-declare type TSize = 'md' | 'sm' | 'xs';
-interface IProps {
-    /** DOM element name that will be rendered */
-    as?: string;
-    size?: TSize;
-    /** Optional custom className */
-    className?: string;
-    caps?: boolean;
-    bold?: boolean;
-    underline?: boolean;
-    strike?: boolean;
-}
-export declare const Text: React.FC<IProps>;
-export {};
+import * as React from 'react';
+declare type TSize = 'md' | 'sm' | 'xs';
+interface IProps {
+    /** DOM element name that will be rendered */
+    as?: string;
+    size?: TSize;
+    /** Optional custom className */
+    className?: string;
+    caps?: boolean;
+    bold?: boolean;
+    underline?: boolean;
+    strike?: boolean;
+}
+export declare const Text: React.FC<IProps>;
+export {};

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

@@ -0,0 +1,2 @@
+export { Heading } from './Heading';
+export { Text } from './Text';

package/dist/src/foundations/shadow-token.d.ts

@@ -0,0 +1,5 @@
+export declare const ShadowToken: {
+    Float: string;
+    PopOver: string;
+    Modal: string;
+};

package/dist/src/foundations/spacing-token.d.ts

@@ -0,0 +1,16 @@
+export declare const SpacingToken: {
+    Spacing0: string;
+    Spacing05: string;
+    Spacing1: string;
+    Spacing2: string;
+    Spacing3: string;
+    Spacing4: string;
+    Spacing5: string;
+    Spacing6: string;
+    Spacing8: string;
+    Spacing12: string;
+    Spacing16: string;
+    Spacing18: string;
+    Spacing20: string;
+    Spacing24: string;
+};