@livechat/design-system-react-components 1.38.1 → 1.38.2

package/dist/components/PromoBannerV2/PromoBannerV2.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { ButtonKind } from '../Button';
+export interface IPromoBannerV2Props {
+    /**
+     * Specify an optional className to be applied to the main container node
+     */
+    className?: string;
+    /**
+     * Element with additional content for second column
+     */
+    additionalContent?: React.ReactNode;
+    /**
+     * Shows the primary CTA button
+     */
+    primaryButton?: {
+        handleClick: () => void;
+        label: string;
+        kind?: ButtonKind;
+    };
+    /**
+     * Shows the secondary CTA button
+     */
+    secondaryButton?: {
+        handleClick: () => void;
+        label: string;
+        kind?: ButtonKind;
+    };
+    /**
+     * Set to true to display the banner vertically
+     */
+    vertical?: boolean;
+    /**
+     * Specify an optional className to be applied to the content node
+     */
+    contentClassName?: string;
+    /**
+     * Specify an optional className to be applied to the additional content node
+     */
+    additionalContentClassName?: string;
+    /**
+     * Event handler for close button press
+     */
+    onClose?: () => void;
+}
+export declare const PromoBannerV2: React.FC<React.PropsWithChildren<IPromoBannerV2Props>>;

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

@@ -0,0 +1 @@
+export declare const SMALL_CONTAINER_WIDTH_TRESHOLD = 559;

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

@@ -0,0 +1,2 @@
+export { PromoBannerV2 } from './PromoBannerV2';
+export type { IPromoBannerV2Props } from './PromoBannerV2';

package/dist/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/components/RadioButton/index.d.ts

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

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+export interface ISearchInputProps {
+    /**
+     * Makes search expandable after focusing the icon
+     */
+    isCollapsable?: boolean;
+    /**
+     * Specify whether the search should be disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Specify whether the search should have loader visible
+     */
+    isLoading?: boolean;
+    /**
+     * Optional text for placeholder
+     */
+    placeholder?: string;
+    /**
+     * Specify the search size
+     */
+    size?: 'compact' | 'medium' | 'large';
+    /**
+     * Specify the search value
+     */
+    value: string;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * The event handler for onChange
+     */
+    onChange: (value: string) => void;
+    /**
+     * Set to enable ellipsis
+     */
+    cropOnBlur?: boolean;
+}
+export declare const SearchInput: React.FC<ISearchInputProps>;

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

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

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { ButtonProps } from '../Button';
+export type ButtonSize = 'compact' | 'medium' | 'large';
+type ButtonElement = {
+    id: string;
+    label: string;
+} & Pick<ButtonProps, 'disabled' | 'loading' | 'icon'>;
+export interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Array of buttons
+     */
+    buttons: ButtonElement[];
+    /**
+     * Set to make buttons fill the container if there is free space
+     */
+    fullWidth?: boolean;
+    /**
+     * Specify the buttons size
+     */
+    size?: ButtonSize;
+    /**
+     * Id of initially selected button
+     */
+    initialId?: string;
+    /**
+     * Id of current selected button, it will make component controlled
+     */
+    currentId?: string;
+    /**
+     * Handler for onClick on specific button
+     */
+    onButtonClick?: (id: string, event: React.MouseEvent<HTMLElement>) => void;
+}
+export declare const SegmentedControl: React.FC<SegmentedControlProps>;
+export {};

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

@@ -0,0 +1,2 @@
+export { SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps } from './SegmentedControl';

package/dist/components/Skeleton/SkeletonAvatar.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface ISkeletonAvatar {
+    /**
+     * Specify if the element is square shape
+     */
+    square?: boolean;
+    /**
+     * Specify the size of the element (wdith and height in px)
+     */
+    size?: number;
+    /**
+     * Specify if the animation is enabled
+     */
+    animated?: boolean;
+}
+export declare const SkeletonAvatar: React.FC<ISkeletonAvatar>;

package/dist/components/Skeleton/SkeletonText.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface ISkeletonText {
+    /**
+     * Specify the height of the element
+     */
+    height?: number;
+    /**
+     * Specify the width of the element
+     */
+    width?: number;
+    /**
+     * Specify if the animation is enabled
+     */
+    animated?: boolean;
+}
+export declare const SkeletonText: React.FC<ISkeletonText>;

package/dist/components/Skeleton/SkeletonWrapper.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface ISkeletonWrapper extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The children elements to be wrapped by the skeleton wrapper
+     */
+    children: React.ReactNode;
+    /**
+     * Specify if the skeleton wrapper should display children elements vertically
+     */
+    vertical?: boolean;
+    /**
+     * Specify if the animation is enabled, it will be passed to the children skeleton components
+     */
+    animated?: boolean;
+}
+export declare const SkeletonWrapper: React.FC<ISkeletonWrapper>;

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

@@ -0,0 +1,3 @@
+export { SkeletonWrapper } from './SkeletonWrapper';
+export { SkeletonAvatar } from './SkeletonAvatar';
+export { SkeletonText } from './SkeletonText';

package/dist/components/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type StatusBadgeSizes = '3XS' | '2XS' | 'XS' | 'SM' | 'MD' | 'LG' | 'XL' | '2XL' | '3XL';
+export interface IStatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Specify the status badge kind
+     */
+    kind?: 'offline' | 'accept' | 'not-accept';
+    /**
+     * Specify the status badge size
+     */
+    size?: StatusBadgeSizes;
+}
+export declare const StatusBadge: React.FC<IStatusBadgeProps>;

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

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

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+export declare const baseClass = "switch";
+export type SwitchSize = 'compact' | 'medium' | 'large';
+export type SwitchState = 'regular' | 'loading' | 'locked';
+export interface SwitchProps {
+    /**
+     * Specify the label for the switch input
+     */
+    ariaLabel?: string;
+    /**
+     * The CSS class for switch container
+     */
+    className?: string;
+    /**
+     * Will set the switch to "on" on component initialization
+     */
+    defaultOn?: boolean;
+    /**
+     * Specify whether the switch should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Ref object
+     */
+    innerRef?: React.LegacyRef<HTMLInputElement> | undefined;
+    /**
+     * Specify the switch input name
+     */
+    name?: string;
+    /**
+     * Define if switch is "on"
+     */
+    on?: boolean;
+    /**
+     * The event handler for onChange
+     */
+    onChange?(e: React.FormEvent, value: boolean): void;
+    /**
+     * Specify the switch size
+     */
+    size?: SwitchSize;
+    /**
+     * Specify the switch state
+     */
+    state?: SwitchState;
+}
+export declare const Switch: React.FC<SwitchProps>;

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

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

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Size } from '../../utils';
+type HTMLProps = (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+}) | (React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never;
+});
+export type TabProps = HTMLProps & {
+    /**
+     * Set to display numeric counter with given number
+     */
+    count?: number;
+    /**
+     * Set to display selected state
+     */
+    isSelected?: boolean;
+    /**
+     * Set to display numeric counter as badge
+     */
+    asBadge?: boolean;
+    /**
+     * Specify the button size
+     */
+    size?: Size;
+    /**
+     * Renders given element
+     */
+    icon?: React.ReactElement;
+};
+export declare const Tab: React.FC<React.PropsWithChildren<TabProps>>;
+export {};

package/dist/components/Tab/TabsWrapper.d.ts

@@ -0,0 +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>>;

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

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

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { TagProps } from './types';
+export declare const Tag: React.FC<React.PropsWithChildren<TagProps>>;

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

@@ -0,0 +1,2 @@
+export declare const kinds: readonly ["default", "info", "warning", "success", "error", "purple", "black", "gray", "gradient01", "gradient02", "gradient03", "gradient04", "gradient05", "gradient06", "gradient07", "gradient08", "gradient09", "gradient10", "gradient11"];
+export declare const sizes: readonly ["small", "medium", "large", "xlarge"];

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

@@ -0,0 +1,3 @@
+export { Tag } from './Tag';
+export type { TagKind, TagSize } from './types';
+export type { TagProps } from './types';

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { kinds, sizes } from './constants';
+export type TagKind = (typeof kinds)[number];
+export type TagSize = (typeof sizes)[number];
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the tag kind
+     */
+    kind?: TagKind;
+    /**
+     * Specify the tag size
+     */
+    size?: TagSize;
+    /**
+     * Set the tag custom color
+     */
+    customColor?: string;
+    /**
+     * Set to show close icon
+     * @deprecated The close icon will be visible by providing the `onRemove` prop and this flag will no longer be needed
+     */
+    dismissible?: boolean;
+    /**
+     * Set to show close icon on hover only if the `onRemove` prop is provided
+     */
+    dismissibleOnHover?: boolean;
+    /**
+     * Set to hide close icon if the `onRemove` prop is provided
+     */
+    disabled?: boolean;
+    /**
+     * Outlined version of tag
+     */
+    outline?: boolean;
+    /**
+     * The event handler for close icon click, if provided the close icon will be visible
+     */
+    onRemove?(e: React.MouseEvent): void;
+    /**
+     * React node element to show on the left
+     */
+    leftNode?: React.ReactElement;
+    /**
+     * React node element to show on the right
+     */
+    rightNode?: React.ReactElement;
+    /**
+     * Set to show the tag as square (only if you want use icon without text)
+     */
+    iconOnly?: boolean;
+    /**
+     * Set text value for the tag. You can use this or `children` prop. If both are provided, `value` prop will be used.
+     */
+    value?: string;
+}

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { TagInputProps, TagInputValues } from './types';
+export declare const TagInput: <T extends TagInputValues>({ id, tags, onChange, validator, error, placeholder, size, className, inputClassName, onBlur, addOnBlur, ...props }: TagInputProps<T>) => React.ReactElement;

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { TagProps } from '../../Tag';
+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';
+    tagProps?: TagProps;
+}
+export declare const EditableTag: React.FC<EditableTagProps>;

package/dist/components/TagInput/components/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/components/TagInput/components/EmailTagInput.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { TagInputProps, TagInputValues } from '../types';
+export type EmailTagInputProps<T> = Omit<TagInputProps<T>, 'validator'>;
+export declare const emailRegex: RegExp;
+export declare const EmailTagInput: <T extends TagInputValues>({ placeholder, ...props }: EmailTagInputProps<T>) => React.ReactElement;

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

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

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { TagProps } from '../Tag';
+export interface TagInputProps<T> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    /**
+     * Set the id for input
+     */
+    id?: string;
+    /**
+     * Set the error message
+     */
+    error?: string;
+    /**
+     * Array of defined tags
+     */
+    tags?: T[];
+    /**
+     * The event handler for modify tags array
+     */
+    onChange: (tags: T[]) => void;
+    /**
+     * Set the input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Set the custom validation for provided items
+     */
+    validator?: (val: string) => boolean;
+    /**
+     * Specify the input size
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Set the input custom class
+     */
+    inputClassName?: string;
+    /**
+     * Add Tag on blur
+     */
+    addOnBlur?: boolean;
+}
+export type TagInputValues = string | Omit<TagProps, 'onRemove' | 'dismissible'>;

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string;
+    error?: boolean;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

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

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+type ToastKind = 'success' | 'warning' | 'error' | 'info';
+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<React.PropsWithChildren<ToastProps>>;
+export {};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ToastProps, Toast } from './Toast';
+type HorizontalPosition = 'left' | 'center' | 'right';
+type VerticalPosition = 'top' | 'bottom';
+export declare const ANIMATION_TIME = 200;
+interface Toast extends Omit<ToastProps, 'content'> {
+    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/components/Toast/index.d.ts

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

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ITooltipProps } from './types';
+export declare const Tooltip: React.FC<React.PropsWithChildren<ITooltipProps>>;

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

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+import { IconKind } from '../Icon';
+import { TooltipTheme } from './types';
+export declare function getIconType(theme: TooltipTheme): IconKind;
+export declare function getArrowPositionStyles(arrowOffsetY?: number, arrowOffsetX?: number, arrowY?: number, arrowX?: number): CSSProperties | undefined;
+export declare const getArrowTokens: (tooltipStyle: string | undefined) => {
+    stroke: string;
+    fill: string;
+};

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ITooltipInfoProps } from '../types';
+export declare const Info: React.FC<ITooltipInfoProps>;

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ITooltipInteractiveProps } from '../types';
+export declare const Interactive: React.FC<ITooltipInteractiveProps>;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface IReportsProps {
+    title: string;
+    description?: string;
+    children: React.ReactNode;
+}
+export declare const Reports: React.FC<IReportsProps>;

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

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

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare const SpotlightOverlay: ({ gap, isVisible, slide, disablePointerEvents, }: {
+    gap: DOMRect | null;
+    isVisible: boolean;
+    slide: boolean;
+    disablePointerEvents: boolean;
+}) => React.ReactElement | null;
+export default SpotlightOverlay;

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

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

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { TooltipTheme } from '../../types';
+export declare const UserGuideStep: React.FC<{
+    header: string;
+    text: string;
+    image?: {
+        src: string;
+        alt: string;
+    };
+    currentStep: number;
+    stepMax: number;
+    closeWithX?: boolean;
+    theme?: TooltipTheme;
+    handleClickPrimary: () => void;
+    handleCloseAction?: (ev: KeyboardEvent | React.MouseEvent) => void;
+}>;

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

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

package/dist/components/Tooltip/components/UserGuide/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/Tooltip/components/index.d.ts

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

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

@@ -0,0 +1,4 @@
+export { Tooltip } from './Tooltip';
+export { Simple, Info, Interactive, Reports } from './components';
+export { UserGuide } from './components/UserGuide';
+export type { ITooltipProps, ITooltipInfoProps, ITooltipInteractiveProps, } from './types';