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

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface Props {
+    id: string;
+    labelText?: string;
+    labelAdornment?: React.ReactNode;
+    className?: string;
+    inline?: boolean;
+    error?: string;
+    description?: React.ReactNode;
+    labelRightNode?: React.ReactNode;
+    fieldClassName?: string;
+    value: string;
+    max?: number;
+    min?: number;
+    onChange: (value: string) => void;
+}
+export declare type NumericInputFieldProps = Props & React.InputHTMLAttributes<HTMLInputElement>;
+export declare const NumericInputField: React.FC<NumericInputFieldProps>;
+export {};

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

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

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as PopperCore from '@popperjs/core';
+declare type PopoverModifiers = {
+    [key: string]: Partial<PopperCore.StrictModifiers>;
+};
+export interface IPopoverProps {
+    children?: React.ReactNode;
+    className?: string;
+    modifiers?: PopoverModifiers;
+    placement?: PopperCore.Placement;
+    isVisible?: boolean;
+    triggerRenderer: () => React.ReactNode;
+}
+export declare const Popover: React.FC<IPopoverProps>;
+export {};

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

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

package/dist/{components → src/components/Progress}/ProgressCircle.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 ProgressCircle: React.ExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>;
+import * as React from 'react';
+import { ProgressSize, ProgressStatus } from './constants';
+export interface ProgressCircleProps {
+    className?: string;
+    percent: number;
+    status?: ProgressStatus;
+    size?: ProgressSize;
+}
+export declare const ProgressCircle: React.ExoticComponent<ProgressCircleProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,12 +1,12 @@
-export declare enum ProgressStatus {
-    Normal = "normal",
-    Error = "error",
-    Success = "success"
-}
-export declare enum ProgressSize {
-    Small = "small",
-    Medium = "medium",
-    Large = "large"
-}
-export declare const PROGRESS_STATUSES: ProgressStatus[];
-export declare const PROGRESS_SIZES: ProgressSize[];
+export declare const enum ProgressStatus {
+    Normal = "normal",
+    Error = "error",
+    Success = "success"
+}
+export declare const enum ProgressSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "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 @@
+export { ProgressCircle } from './ProgressCircle';

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

@@ -1,19 +1,19 @@
-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 declare const enum PromoBannerSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+export interface PromoBannerProps {
+    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<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?: React.ReactNode;
+    checked?: boolean;
+    disabled?: boolean;
+}
+export declare const RadioButton: React.FC<RadioButtonProps>;

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

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

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

@@ -1,17 +1,20 @@
-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 enum SwitchSize {
+    Basic = "basic",
+    Compact = "compact"
+}
+export declare const enum SwitchStyles {
+    Enabled = "enabled",
+    Disabled = "disabled"
+}
+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;
+}
+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/TextField/TextField.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface TextFieldProps {
+    labelText?: string;
+    labelAdornment?: React.ReactNode;
+    labelFor?: string;
+    className?: string;
+    inline?: boolean;
+    error?: string;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    labelRightNode?: React.ReactNode;
+}
+export declare const TextField: React.FC<TextFieldProps>;

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

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

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

@@ -1,22 +1,22 @@
-import * as React from 'react';
-export declare enum Variants {
-    Success = "success",
-    Warning = "warning",
-    Error = "error",
-    Info = "info",
-    Notification = "notification"
-}
-interface IToastActionProps {
-    handler: () => void;
-    label: string;
-    closeOnClick?: boolean;
-}
-export interface IToastProps {
-    action?: IToastActionProps;
-    className?: string;
-    removable?: boolean;
-    variant?: Variants;
-    onClose?: () => void;
-}
-export declare const Toast: React.FC<IToastProps>;
-export {};
+import * as React from 'react';
+export declare const enum Variants {
+    Success = "success",
+    Warning = "warning",
+    Error = "error",
+    Info = "info",
+    Notification = "notification"
+}
+interface ToastAction {
+    handler: () => void;
+    label: string;
+    closeOnClick?: boolean;
+}
+export interface ToastProps {
+    action?: ToastAction;
+    className?: string;
+    removable?: boolean;
+    variant?: Variants;
+    onClose?: () => void;
+}
+export declare const Toast: React.FC<ToastProps>;
+export {};

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

@@ -1,26 +1,27 @@
-import * as React from 'react';
-import { IToastProps } from './Toast';
-export declare enum HorizontalPosition {
-    Left = "left",
-    Center = "center",
-    Right = "right"
-}
-export declare enum VerticalPosition {
-    Top = "top",
-    Bottom = "bottom"
-}
-export declare const ANIMATION_TIME = 200;
-export interface IToastsProps extends IToastProps {
-    id: string;
-    content: React.ReactElement | string;
-}
-export interface IToastWrapperProps {
-    className?: string;
-    toasts: IToastsProps[];
-    fixed?: boolean;
-    block?: boolean;
-    animationType?: string;
-    verticalPosition?: VerticalPosition;
-    horizontalPosition?: HorizontalPosition;
-}
-export declare const ToastWrapper: React.FC<IToastWrapperProps>;
+import * as React from 'react';
+import { ToastProps, Toast } from './Toast';
+export declare enum HorizontalPosition {
+    Left = "left",
+    Center = "center",
+    Right = "right"
+}
+export declare enum VerticalPosition {
+    Top = "top",
+    Bottom = "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/{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/index.d.ts

@@ -0,0 +1,29 @@
+export { DesignTokens } from './themes/designTokens';
+export * from './components/Alert';
+export * from './components/Badge';
+export * from './components/Button';
+export * from './components/ButtonGroup';
+export * from './components/Card';
+export * from './components/Checkbox';
+export * from './components/FieldDescription';
+export * from './components/FieldError';
+export * from './components/FieldGroup';
+export * from './components/Form';
+export * from './components/FormGroup';
+export * from './components/Icon';
+export * from './components/InputField';
+export * from './components/Link';
+export * from './components/Loader';
+export * from './components/Modal';
+export * from './components/NumericInput';
+export * from './components/Popover';
+export * from './components/Progress';
+export * from './components/PromoBanner';
+export * from './components/RadioButton';
+export * from './components/Switch';
+export * from './components/Tab';
+export * from './components/Tag';
+export * from './components/TagInput';
+export * from './components/TextField';
+export * from './components/Toast';
+export * from './components/Typography';

package/dist/src/themes/designTokens.d.ts

@@ -0,0 +1,126 @@
+export declare const DesignTokens: {
+    Background: string;
+    SurfaceBasicDefault: string;
+    SurfaceBasicSubtle: string;
+    SurfaceBasicHover: string;
+    SurfaceBasicActive: string;
+    SurfaceBasicDisabled: string;
+    SurfaceSecondaryDefault: string;
+    SurfaceSecondarySubtle: string;
+    SurfaceSecondaryHover: string;
+    SurfaceSecondaryDisabled: string;
+    SurfaceFeedbackInfo: string;
+    SurfaceFeedbackNegative: string;
+    SurfaceFeedbackWarning: string;
+    SurfaceFeedbackPositive: string;
+    SurfaceInvertDefault: string;
+    SurfaceInvertSubtle: string;
+    SurfaceInvertDisabled: string;
+    SurfaceOverlay: string;
+    ContentDefault: string;
+    ContentSubtle: string;
+    ContentDisabled: string;
+    ContentWhiteLocked: string;
+    ContentInvertDefault: string;
+    ContentInvertSubtle: string;
+    ContentInvertDisabled: string;
+    BorderDefault: string;
+    BorderSubtle: string;
+    BorderHover: string;
+    BorderDisabled: string;
+    BorderInvertDefault: string;
+    BorderInvertSubtle: string;
+    BorderInvertHover: string;
+    BorderInvertDisabled: string;
+    ColorActionActive: string;
+    ColorActionHover: string;
+    ColorActionDefault: string;
+    ColorActionDisabled: string;
+    ColorNegativeActive: string;
+    ColorNegativeHover: string;
+    ColorNegativeDefault: string;
+    ColorNegativeDisabled: string;
+    ColorWarningDefault: string;
+    ColorWarningHover: string;
+    ColorPositiveDefault: string;
+    ColorPositiveHover: string;
+    ColorPositiveDisabled: string;
+    ColorBot: string;
+    ColorBlack: string;
+    ColorWhite: string;
+    DecorBlue900: string;
+    DecorBlue800: string;
+    DecorBlue700: string;
+    DecorBlue600: string;
+    DecorBlue500: string;
+    DecorBlue400: string;
+    DecorBlue300: string;
+    DecorBlue200: string;
+    DecorBlue100: string;
+    DecorBlue50: string;
+    DecorOrange900: string;
+    DecorOrange800: string;
+    DecorOrange700: string;
+    DecorOrange600: string;
+    DecorOrange500: string;
+    DecorOrange400: string;
+    DecorOrange300: string;
+    DecorOrange200: string;
+    DecorOrange100: string;
+    DecorOrange50: string;
+    DecorYellow900: string;
+    DecorYellow800: string;
+    DecorYellow700: string;
+    DecorYellow600: string;
+    DecorYellow500: string;
+    DecorYellow400: string;
+    DecorYellow300: string;
+    DecorYellow200: string;
+    DecorYellow100: string;
+    DecorYellow50: string;
+    DecorGray950: string;
+    DecorGray900: string;
+    DecorGray800: string;
+    DecorGray700: string;
+    DecorGray600: string;
+    DecorGray500: string;
+    DecorGray400: string;
+    DecorGray300: string;
+    DecorGray200: string;
+    DecorGray150: string;
+    DecorGray100: string;
+    DecorGray75: string;
+    DecorGray50: string;
+    DecorGray40: string;
+    DecorGray20: string;
+    DecorGreen900: string;
+    DecorGreen800: string;
+    DecorGreen700: string;
+    DecorGreen600: string;
+    DecorGreen500: string;
+    DecorGreen400: string;
+    DecorGreen300: string;
+    DecorGreen200: string;
+    DecorGreen100: string;
+    DecorGreen50: string;
+    DecorRed900: string;
+    DecorRed800: string;
+    DecorRed700: string;
+    DecorRed600: string;
+    DecorRed500: string;
+    DecorRed400: string;
+    DecorRed300: string;
+    DecorRed200: string;
+    DecorRed100: string;
+    DecorRed50: string;
+    DecorPurple900: string;
+    DecorPurple800: string;
+    DecorPurple700: string;
+    DecorPurple600: string;
+    DecorPurple500: string;
+    DecorPurple400: string;
+    DecorPurple300: string;
+    DecorPurple200: string;
+    DecorPurple100: string;
+    DecorPurple50: string;
+};

package/dist/src/utils/keyCodes.d.ts

@@ -0,0 +1,12 @@
+export declare const KeyCodes: {
+    esc: string;
+    enter: string;
+    backspace: string;
+    delete: string;
+    spacebar: string;
+    tab: string;
+    semicolon: string;
+    comma: string;
+    arrowUp: string;
+    arrowDown: string;
+};