@livechat/design-system-react-components 1.0.0-alpha.57 → 1.0.0-alpha.58

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type AlertKind = 'info' | 'warning' | 'success' | 'error';
+type AlertKind = 'info' | 'warning' | 'success' | 'error';
 export interface AlertProps {
     /**
      * The CSS class for container

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-declare type AvatarShape = 'circle' | 'rounded-square';
-declare type AvatarSize = 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
-declare type AvatarStatus = 'available' | 'unavailable' | 'unknown';
-declare type AvatarType = 'image' | 'text';
+type AvatarShape = 'circle' | 'rounded-square';
+type AvatarSize = 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+type AvatarStatus = 'available' | 'unavailable' | 'unknown';
+type AvatarType = 'image' | 'text';
 export interface AvatarProps {
     /**
      * Alternate text for an image avatar

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Size } from 'utils';
-export declare type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'text' | 'plain' | 'plain-light' | 'subtle' | 'float' | 'dotted';
-export declare type ButtonProps = {
+export type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'text' | 'plain' | 'plain-light' | 'subtle' | 'float' | 'dotted';
+export type ButtonProps = {
     /**
      * Specify the button kind
      */

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonProps } from '../Button';
-export declare type CardButtonOptions = Pick<ButtonProps, 'children' | 'kind' | 'onClick'>;
+export type CardButtonOptions = Pick<ButtonProps, 'children' | 'kind' | 'onClick'>;
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Alternate text for an image card

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

@@ -5,12 +5,12 @@ export declare const isDateWithinRange: (date: Date, range: {
     from?: Date;
     to?: Date;
 }) => boolean;
-export declare const calculateDatePickerMonth: (initialFromDate?: Date | undefined, initialToDate?: Date | undefined, toMonth?: Date | undefined) => Date;
-export declare const getRangeDatePickerModifiers: (from?: Date | undefined, to?: Date | undefined) => Partial<Modifiers>;
+export declare const calculateDatePickerMonth: (initialFromDate?: Date, initialToDate?: Date, toMonth?: Date) => Date;
+export declare const getRangeDatePickerModifiers: (from?: Date, to?: Date) => Partial<Modifiers>;
 export declare const getSelectedOption: (itemId: string | null, options: IRangeDatePickerOption[]) => IRangeDatePickerOption | undefined;
-export declare const isSelectingFirstDay: (from?: Date | undefined, to?: Date | undefined) => boolean;
+export declare const isSelectingFirstDay: (from?: Date, to?: Date) => boolean;
 export declare const getInitialStateFromProps: (props: IRangeDatePickerProps) => Partial<IRangeDatePickerState>;
-export declare const getDatePickerClassNames: (range?: boolean | undefined, classNames?: ClassNames | undefined) => {
+export declare const getDatePickerClassNames: (range?: boolean, classNames?: ClassNames) => {
     container: string;
     wrapper: string;
     interactionDisabled: string;

package/dist/{src/components → components}/DatePicker/types.d.ts

@@ -29,7 +29,7 @@ export declare enum RangeDatePickerAction {
     SELECT_SECOND_DAY_AS_TO = "SELECT_SECOND_DAY_AS_TO",
     CURRENT_MONTH_CHANGE = "CURRENT_MONTH_CHANGE"
 }
-export declare type IRangeDatePickerReducerAction = {
+export type IRangeDatePickerReducerAction = {
     type: RangeDatePickerAction.NEW_SELECTED_ITEM;
     payload: {
         selectedItem: string | null;
@@ -52,7 +52,7 @@ export interface IRangeDatePickerState {
     temporaryTo?: Date;
     currentMonth: Date;
 }
-export declare type RangeDatePickerReducer = Reducer<IRangeDatePickerState, IRangeDatePickerReducerAction>;
+export type RangeDatePickerReducer = Reducer<IRangeDatePickerState, IRangeDatePickerReducerAction>;
 export interface IRangeDatePickerOption {
     id: string;
     label: string;

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

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

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

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

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { ProgressSize, ProgressStatus } from '../Progress/constants';
+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/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<FormFieldProps>;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export type IconSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type IconKind = 'primary' | 'subtle' | 'inverted' | 'inverted-subtle' | 'link' | 'success' | 'warning' | 'error';
+export type IconSource = React.FC<React.SVGProps<SVGSVGElement>> & React.ReactElement;
+export interface IconProps {
+    source: IconSource;
+    size?: IconSize;
+    kind?: IconKind;
+    disabled?: boolean;
+    className?: string;
+    customColor?: string;
+}
+export declare const Icon: React.FC<IconProps>;
+export default Icon;

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

@@ -1,10 +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;
-    /** Fragment circle color */
+    /**
+     * Set the loader highlight color
+     */
     primaryColor?: string;
-    /** Main circle color */
+    /**
+     * Set the loader color
+     */
     secondaryColor?: string;
 }
 export declare const Loader: React.FC<LoaderProps>;

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

@@ -9,6 +9,6 @@ interface Props {
     noControls?: boolean;
     onChange: (value: string) => void;
 }
-export declare type NumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & Props;
+export type NumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & Props;
 export declare const NumericInput: React.FC<NumericInputProps>;
 export {};

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IPickerListItem } from './PickerList';
 import { IconSize } from '../Icon';
 import { Size } from 'utils';
-export declare type PickerType = 'single' | 'multi';
+export type PickerType = 'single' | 'multi';
 export interface IPickerProps {
     /**
      * Specify the custom id

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

@@ -1,9 +1,21 @@
 import * as React from 'react';
 import { ProgressSize, ProgressStatus } from './constants';
 export interface ProgressBarProps {
+    /**
+     * The CSS class for container
+     */
     className?: string;
+    /**
+     * Specify the value of current progress bar (0-100)
+     */
     percent: number;
+    /**
+     * Specify the progress bar status
+     */
     status?: ProgressStatus;
+    /**
+     * Specify the progress bar size
+     */
     size?: ProgressSize;
 }
 export declare const ProgressBar: React.ExoticComponent<ProgressBarProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,9 +1,21 @@
 import * as React from 'react';
 import { ProgressSize, ProgressStatus } from './constants';
 export interface ProgressCircleProps {
+    /**
+     * The CSS class for container
+     */
     className?: string;
+    /**
+     * Specify the value of current progress circle (0-100)
+     */
     progressValue: number;
+    /**
+     * Specify the progress circle status
+     */
     status?: ProgressStatus;
+    /**
+     * Specify the progress circle size
+     */
     size?: ProgressSize;
 }
 export declare const ProgressCircle: React.ExoticComponent<ProgressCircleProps & React.RefAttributes<HTMLInputElement>>;

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

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ButtonProps } from '../Button';
-export declare type ButtonSize = 'compact' | 'medium' | 'large';
-declare type ButtonElement = {
+export type ButtonSize = 'compact' | 'medium' | 'large';
+type ButtonElement = {
     id: string;
     label: string;
 } & Pick<ButtonProps, 'disabled' | 'loading' | 'icon'>;

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

@@ -1,7 +1,7 @@
 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 type SwitchSize = 'compact' | 'medium' | 'large';
+export type SwitchState = 'regular' | 'loading' | 'locked';
 export interface SwitchProps {
     ariaLabel?: string;
     className?: string;

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { Size } from 'utils';
-declare type HTMLProps = (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+type HTMLProps = (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     href: string;
 }) | (React.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
 });
-export declare type TabProps = HTMLProps & {
+export type TabProps = HTMLProps & {
     count?: number;
     isSelected?: boolean;
     asBadge?: boolean;

package/dist/{src/components → components}/TagInput/EmailTagInput.d.ts

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-declare type ToastKind = 'success' | 'warning' | 'error' | 'info';
-declare type ToastAction = {
+type ToastKind = 'success' | 'warning' | 'error' | 'info';
+type ToastAction = {
     onClick: () => void;
     label: string;
     closesOnClick?: boolean;

package/dist/{src/components → components}/Toast/ToastWrapper.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { ToastProps, Toast } from './Toast';
-declare type HorizontalPosition = 'left' | 'center' | 'right';
-declare type VerticalPosition = 'top' | 'bottom';
+type HorizontalPosition = 'left' | 'center' | 'right';
+type VerticalPosition = 'top' | 'bottom';
 export declare const ANIMATION_TIME = 200;
-interface Toast extends ToastProps {
+interface Toast extends Omit<ToastProps, 'content'> {
     id: string;
     content: React.ReactElement | string;
 }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type TSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+type TSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 interface IProps {
     size?: TSize;
     /** DOM element name that will be rendered */

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type TSize = 'md' | 'sm' | 'xs';
+type TSize = 'md' | 'sm' | 'xs';
 interface IProps {
     /** DOM element name that will be rendered */
     as?: string;

package/dist/components/UploadBar/UploadBar.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { ProgressStatus, ProgressSize } from '../Progress/constants';
+export interface UploadBarProps {
+    /**
+     * The CSS class for container
+     */
+    className?: string;
+    /**
+     * Specify the value of current progress circle (0-100)
+     */
+    progressValue: number;
+    /**
+     * Specify the upload bar title
+     */
+    title: string;
+    /**
+     * Define if upload bar should be open
+     */
+    isExpanded?: boolean;
+    /**
+     * Specify the error message
+     */
+    errorMessage?: string;
+    /**
+     * Specify the upload bar status
+     */
+    status?: ProgressStatus;
+    /**
+     * Renders given element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Specify the upload bar size
+     */
+    size?: ProgressSize;
+    /**
+     * Set the component's mode to `multiple` to specify whether the upload bar should display multiple elements
+     */
+    mode?: 'single' | 'multiple';
+    /**
+     * The event handler for close icon click
+     */
+    onCloseButtonClick?: () => void;
+    /**
+     * The event handler for retry icon click
+     */
+    onRetryButtonClick?: () => void;
+}
+export declare const UploadBar: React.FC<React.PropsWithChildren<UploadBarProps>>;