@livechat/design-system-react-components 2.2.2 → 2.3.0

package/dist/components/FieldDescription/FieldDescription.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type FieldDescriptionProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const FieldDescription: React.FC<React.PropsWithChildren<FieldDescriptionProps>>;

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

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

package/dist/components/FieldError/FieldError.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type FieldErrorProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const FieldError: React.FC<React.PropsWithChildren<FieldErrorProps>>;

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

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

package/dist/components/FieldGroup/FieldGroup.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    description?: React.ReactNode;
+    error?: string;
+    inline?: boolean;
+    stretch?: boolean;
+}
+export declare const FieldGroup: React.FC<React.PropsWithChildren<FieldGroupProps>>;

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

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

package/dist/components/FileUploadProgress/FileUploadProgress.d.ts

@@ -0,0 +1,42 @@
+import { ProgressSize, ProgressStatus } from '../Progress/constants';
+import * as React from 'react';
+export type UploadProgressActionState = 'visible' | 'hover' | 'hidden';
+export interface FileUploadProgressProps {
+    /**
+     * Define if action buttons should be visible, visible on hover, or hidden
+     */
+    actionsVisibility?: UploadProgressActionState;
+    /**
+     * The CSS class for progress bar
+     */
+    className?: string;
+    /**
+     * Renders given element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Specify the uploading file name
+     */
+    title: string;
+    /**
+     * Specify the value of current file upload progress (0-100)
+     */
+    progressValue: number;
+    /**
+     * Specify the progress bar size
+     */
+    size?: ProgressSize;
+    /**
+     * Specify the uploading file status
+     */
+    status?: ProgressStatus;
+    /**
+     * The event handler for close icon click
+     */
+    onCloseButtonClick?: () => void;
+    /**
+     * The event handler for retry icon click
+     */
+    onRetryButtonClick?: () => void;
+}
+export declare const FileUploadProgress: React.ExoticComponent<FileUploadProgressProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/FileUploadProgress/FileUploadProgressActions.d.ts

@@ -0,0 +1,9 @@
+import { ProgressStatus } from '../Progress/constants';
+import * as React from 'react';
+interface FileUploadProgressActionsProps {
+    status: ProgressStatus;
+    onCloseButtonClick?: () => void;
+    onRetryButtonClick?: () => void;
+}
+export declare const FileUploadProgressActions: React.FC<FileUploadProgressActionsProps>;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './FileUploadProgress';
+export * from './FileUploadProgressActions';

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface FormProps extends React.HTMLAttributes<HTMLFormElement> {
+    /**
+     * Set form label
+     */
+    labelText?: string;
+    /**
+     * Set form description
+     */
+    helperText?: string;
+    /**
+     * Footer element
+     */
+    formFooter?: React.ReactNode;
+}
+export declare const Form: React.FC<React.PropsWithChildren<FormProps>>;

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

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

package/dist/components/FormField/FormField.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+export interface FormFieldProps {
+    /**
+     * Define label text
+     */
+    labelText?: string;
+    /**
+     * Renders given element aligned to label, `inline` will affect
+     */
+    labelAdornment?: React.ReactNode;
+    /**
+     * Define to associate the label with the field
+     */
+    labelFor?: string;
+    /**
+     * The CSS class for field container
+     */
+    className?: string;
+    /**
+     * Set the label to inline version
+     */
+    inline?: boolean;
+    /**
+     * Define error text
+     */
+    error?: string;
+    /**
+     * Define the description text
+     */
+    description?: React.ReactNode;
+    /**
+     * Wrapped element
+     */
+    children?: React.ReactNode;
+    /**
+     * Renders given element above the filed
+     */
+    labelRightNode?: React.ReactNode;
+}
+export declare const FormField: React.FC<React.PropsWithChildren<FormFieldProps>>;

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

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

package/dist/components/FormGroup/FormGroup.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The CSS class for container
+     */
+    className?: string;
+    /**
+     * Set form label
+     */
+    labelText?: string;
+    /**
+     * Set form description
+     */
+    helperText?: string;
+}
+export declare const FormGroup: React.FC<React.PropsWithChildren<FormGroupProps>>;

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

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

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

@@ -0,0 +1,32 @@
+import { IconSource } from './types';
+import * as React from 'react';
+export type IconSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+export type IconKind = 'primary' | 'subtle' | 'inverted' | 'inverted-subtle' | 'link' | 'success' | 'warning' | 'error' | 'negative' | 'positive' | 'action-primary' | 'action-negative' | 'action-positive' | 'action-warning' | 'action-neutral' | 'lock-black';
+export interface IconProps {
+    /**
+     * Specify the source of svg element
+     */
+    source: IconSource;
+    /**
+     * Specify the icon size
+     */
+    size?: IconSize;
+    /**
+     * Specify the icon kind
+     */
+    kind?: IconKind;
+    /**
+     * Specify whether the icon should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * The CSS class for icon
+     */
+    className?: string;
+    /**
+     * Set the icon custom color
+     */
+    customColor?: string;
+}
+export declare const Icon: React.FC<React.PropsWithChildren<IconProps>>;
+export default Icon;

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

@@ -0,0 +1,11 @@
+import { IconSource } from '../index';
+import { IconName } from './types';
+import * as React from 'react';
+export type IconsMap = {
+    [key: string]: IconSource;
+};
+interface IProps {
+    data: IconName[];
+}
+export declare const IconsShowcase: React.FC<IProps>;
+export {};

package/dist/components/Icon/IconsShowcase/constans.d.ts

@@ -0,0 +1,3 @@
+import { IconGroup, IconName } from './types';
+
+export declare const IconsData: Record<IconName, IconGroup>;

package/dist/components/Icon/IconsShowcase/helpers.d.ts

@@ -0,0 +1,3 @@
+import { IconGroup, IconName } from './types';
+
+export declare const getIconsByGroup: (group: IconGroup) => IconName[];

package/dist/components/Icon/IconsShowcase/types.d.ts

@@ -0,0 +1,9 @@
+import * as DSIcons from '@livechat/design-system-icons';
+export type IconName = keyof typeof DSIcons;
+export declare enum IconGroup {
+    Arrows = 0,
+    Text = 1,
+    FileType = 2,
+    General = 3,
+    Brands = 4
+}

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

@@ -0,0 +1,2 @@
+export * from './Icon';
+export type { IconSource } from './types';

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

@@ -0,0 +1,3 @@
+import { FC, SVGProps } from 'react';
+
+export type IconSource = FC<SVGProps<SVGSVGElement>>;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+interface InputIcon {
+    source: React.ReactElement;
+    place: 'left' | 'right';
+}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Specify the input size
+     */
+    inputSize?: 'xsmall' | 'compact' | 'medium' | 'large';
+    /**
+     * Specify whether the input should be in error state
+     */
+    error?: boolean;
+    /**
+     * Specify whether the input should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Set the icon and its position
+     */
+    icon?: InputIcon;
+    /**
+     * Set to enable ellipsis
+     */
+    cropOnBlur?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

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

package/dist/components/InviteAgents/InviteAgents.d.ts

@@ -0,0 +1,3 @@
+import { InviteAgentsProps } from './types';
+
+export declare const InviteAgents: import('react').NamedExoticComponent<InviteAgentsProps>;

package/dist/components/InviteAgents/components/AnimatedButton/AnimatedButton.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface AnimatedIconButtonProps {
+    /**
+     * The icon to display inside the button.
+     */
+    icon: React.ReactElement;
+    /**
+     * The text to display alongside the icon.
+     */
+    text: string;
+    /**
+     * Optional click handler.
+     */
+    onClick?: () => void;
+    /**
+     * Optional className to apply to the button.
+     */
+    className?: string;
+    /**
+     * Optional prop to control the expanded state of the button.
+     */
+    isExpanded?: boolean;
+}
+export declare const AnimatedButton: React.FC<AnimatedIconButtonProps>;

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

@@ -0,0 +1,4 @@
+import { Agent } from './types';
+
+export declare const getSortedAgents: (agents: Agent[]) => Agent[];
+export declare const getAvailableAgentsTooltipText: (availableAgentsNumber: number) => string;

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

@@ -0,0 +1,2 @@
+export { InviteAgents } from './InviteAgents';
+export { type InviteAgentsProps, type Agent } from './types';

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

@@ -0,0 +1,34 @@
+import { ComponentCoreProps } from '../../utils/types';
+
+export interface Agent {
+    name: string;
+    email: string;
+    status: 'available' | 'unavailable' | 'unknown';
+    avatar?: string;
+}
+export interface InviteAgentsProps extends ComponentCoreProps {
+    /**
+     * The list of invited agents
+     */
+    agents: Agent[];
+    /**
+     * The function to call when the "Set up Chatbot" button is clicked
+     */
+    onSetUpChatbotClick: () => void;
+    /**
+     * The function to call when the "Invite Teammate" button is clicked
+     */
+    onAddTeammateClick: () => void;
+    /**
+     * Whether the invite button should be animated
+     */
+    animatedInviteButton?: boolean;
+    /**
+     * Offset for the tooltip arrow
+     */
+    tooltipArrowOffset?: number;
+    /**
+     * The function to call when the "Available" button is clicked
+     */
+    onAvailableAgentsClick: () => void;
+}

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    bold?: boolean;
+}
+/**
+ * Simple component which renders an `<a>` element.
+ *
+ * Place the `<Link>` inside a `<Text>` component or pass a custom className to set the typography styles.
+ *
+ * Use `<Button kind="link">` to act as a `<button>` - <a target="_self" href="/story/components-button--kinds">see the story</a>.
+ *
+ * Use `<Button href="">` to display as a `<Button>` - <a target="_self" href="/story/components-button--link">see the story</a>.
+ */
+export declare const Link: React.FC<React.PropsWithChildren<LinkProps>>;

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

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

package/dist/components/Loader/Loader.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the loader size
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Specify the loader label
+     */
+    label?: string;
+    /**
+     * Set the loader highlight color
+     */
+    primaryColor?: string;
+    /**
+     * Set the loader color
+     */
+    secondaryColor?: string;
+}
+export declare const Loader: React.FC<LoaderProps>;

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

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

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

@@ -0,0 +1,25 @@
+import { ModalBaseProps } from './components/ModalBase';
+import * as React from 'react';
+export interface ModalProps extends ModalBaseProps {
+    /**
+     * Header element. For consistent UI use `<ModalHeader/>`
+     */
+    heading?: React.ReactNode;
+    /**
+     * Header element outside the main container. For consistent UI use `<ModalHeader/>`
+     */
+    labelHeading?: React.ReactNode;
+    /**
+     * Removes the spacing inside the main container
+     */
+    fullSpaceContent?: boolean;
+    /**
+     * Footer element
+     */
+    footer?: React.ReactNode;
+    /**
+     * Class name for the content container
+     */
+    contentClassName?: string;
+}
+export declare const Modal: React.FC<React.PropsWithChildren<ModalProps>>;

package/dist/components/Modal/StoriesComponents.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const ModalFullSpaceContent: React.FC;
+export declare const ModalContent: React.FC;
+export declare const ModalFooter: React.FC;

package/dist/components/Modal/components/ActionModalContent.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+interface IActionModalProps {
+    /**
+     * Optional element to render icon or image
+     */
+    icon?: React.ReactNode;
+    /**
+     * Set the header text
+     */
+    heading?: React.ReactNode;
+    /**
+     * Optional element to render action buttons
+     */
+    actions?: React.ReactNode;
+    /**
+     * The CSS class for main container
+     */
+    className?: string;
+    /**
+     * The CSS class for header container
+     */
+    headerClassName?: string;
+    /**
+     * The CSS class for content container
+     */
+    contentClassName?: string;
+}
+export declare const ActionModalContent: React.FC<React.PropsWithChildren<IActionModalProps>>;
+export {};

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface ModalBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The event handler for close button
+     */
+    onClose(): void;
+    /**
+     * Triggers the onClose event on `esc` key press
+     */
+    closeOnEscPress?: boolean;
+    /**
+     * Triggers the onClose event on overlay click
+     */
+    closeOnOverlayPress?: boolean;
+    /**
+     * Removes the spacing inside the main container
+     */
+    fullSpaceContent?: boolean;
+    /**
+     * Put extra margin on the top of the modal for the label
+     */
+    isLabelled?: boolean;
+}
+export declare const ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>>;

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

@@ -0,0 +1,7 @@
+import { ButtonProps } from '../../Button';
+import * as React from 'react';
+export interface ModalCloseButtonProps extends ButtonProps {
+    labelType?: boolean;
+    customColor?: string;
+}
+export declare const ModalCloseButton: React.FC<ModalCloseButtonProps>;

package/dist/components/Modal/components/ModalHeader.d.ts

@@ -0,0 +1,26 @@
+import { AvatarProps } from '../../Avatar';
+import { IconProps } from '../../Icon';
+import * as React from 'react';
+export interface ModalHeaderProps {
+    /**
+     * Set the header title
+     */
+    title?: React.ReactNode;
+    /**
+     * Set to display the icon
+     */
+    iconProps?: IconProps;
+    /**
+     * Set to display avatar
+     */
+    avatarProps?: AvatarProps;
+    /**
+     * Children element
+     */
+    children?: React.ReactNode;
+    /**
+     * Define class name for container
+     */
+    className?: string;
+}
+export declare const ModalHeader: React.FC<React.PropsWithChildren<ModalHeaderProps>>;

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

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

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

@@ -0,0 +1,11 @@
+export { Modal } from './Modal';
+export { ModalBase } from './components/ModalBase';
+export { ModalCloseButton } from './components/ModalCloseButton';
+export { ModalPortal } from './components/ModalPortal';
+export { ModalHeader } from './components/ModalHeader';
+export { ActionModalContent } from './components/ActionModalContent';
+export type { ModalProps } from './Modal';
+export type { ModalBaseProps } from './components/ModalBase';
+export type { ModalCloseButtonProps } from './components/ModalCloseButton';
+export type { ModalPortalProps } from './components/ModalPortal';
+export type { ModalHeaderProps } from './components/ModalHeader';

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

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

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

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

package/dist/components/OnboardingChecklist/OnboardingChecklist.d.ts

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

package/dist/components/OnboardingChecklist/components/CheckListItem.d.ts

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

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

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

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

@@ -0,0 +1,2 @@
+export { OnboardingChecklist } from './OnboardingChecklist';
+export type { IOnboardingChecklistProps, IChecklistItemProps, ICompletionMessageDataProps, } from './types';