@livechat/design-system-react-components 1.0.0-alpha.0

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,13 @@
+import * as React from 'react';
+declare type Tags = string[];
+export interface TagInputProps {
+    id?: string;
+    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/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/src/components/Textarea/index.d.ts

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

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/src/components/Typography/Heading.d.ts

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ProgressStatus, ProgressSize } from '../Progress/constants';
+export interface UploadBarProps {
+    className?: string;
+    progressValue: number;
+    title: string;
+    isExpanded?: boolean;
+    errorMessage?: string;
+    status?: ProgressStatus;
+    icon?: React.ReactNode;
+    size?: ProgressSize;
+    mode?: 'single' | 'multiple';
+    onCloseButtonClick?: () => void;
+    onRetryButtonClick?: () => void;
+}
+export declare const UploadBar: React.FC<UploadBarProps>;

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

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

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;
+};

package/dist/src/index.d.ts

@@ -0,0 +1,41 @@
+export { DesignToken } from './themes/design-token';
+export { SpacingToken } from './foundations/spacing-token';
+export { ShadowToken } from './foundations/shadow-token';
+export type { Size } from './utils';
+export * from './components/Alert';
+export * from './components/Avatar';
+export * from './components/Badge';
+export * from './components/Button';
+export * from './components/SegmentedControl';
+export * from './components/Card';
+export * from './components/Checkbox';
+export * from './components/DatePicker';
+export * from './components/FieldDescription';
+export * from './components/FieldError';
+export * from './components/FieldGroup';
+export * from './components/Form';
+export * from './components/FormField';
+export * from './components/FormGroup';
+export * from './components/Icon';
+export * from './components/Input';
+export * from './components/Link';
+export * from './components/Loader';
+export * from './components/Modal';
+export * from './components/NumericInput';
+export * from './components/Picker';
+export * from './components/Popover';
+export * from './components/Progress';
+export * from './components/PromoBanner';
+export * from './components/RadioButton';
+export * from './components/Search';
+export * from './components/Switch';
+export * from './components/Tab';
+export * from './components/Tag';
+export * from './components/TagInput';
+export * from './components/FormField';
+export * from './components/Toast';
+export * from './components/Tooltip';
+export * from './components/Typography';
+export * from './components/Textarea';
+export * from './components/FileUploadProgress';
+export * from './components/UploadBar';

package/dist/src/themes/design-token.d.ts

@@ -0,0 +1,226 @@
+export declare const DesignToken: {
+    Background: string;
+    Background01: string;
+    Background02: string;
+    Background03: string;
+    SurfaceBasicDefault: string;
+    SurfacePrimaryDefault: string;
+    SurfaceBasicSubtle: string;
+    SurfaceSecondaryDefault: string;
+    SurfaceSecondaryHover: string;
+    SurfaceSecondaryActive: string;
+    SurfaceSecondaryDisabled: string;
+    SurfaceBasicHover: string;
+    SurfacePrimaryHover: string;
+    SurfaceBasicActive: string;
+    SurfacePrimaryActive: string;
+    SurfacePrimaryActiveColored: string;
+    SurfaceBasicDisabled: string;
+    SurfacePrimaryDisabled: string;
+    SurfaceTertiaryDefault: string;
+    SurfaceSecondarySubtle: string;
+    SurfaceModerateDefault: string;
+    SurfaceModerateHover: string;
+    SurfaceModerateActive: string;
+    SurfaceTertiaryHover: string;
+    SurfaceTertiaryActive: string;
+    SurfaceTertiaryDisabled: string;
+    SurfaceFeedbackInfo: string;
+    SurfaceAccentEmphasisLowInfo: string;
+    SurfaceFeedbackNegative: string;
+    SurfaceAccentEmphasisLowNegative: string;
+    SurfaceFeedbackWarning: string;
+    SurfaceAccentEmphasisLowWarning: string;
+    SurfaceFeedbackPositive: string;
+    SurfaceAccentEmphasisLowPositive: string;
+    SurfaceAccentEmphasisLowPurple: string;
+    SurfaceAccentEmphasisMinInfo: string;
+    SurfaceAccentEmphasisMinNegative: string;
+    SurfaceAccentEmphasisMinWarning: string;
+    SurfaceAccentEmphasisMinPositive: string;
+    SurfaceAccentEmphasisMinPurple: string;
+    SurfaceInvertDefault: string;
+    SurfaceInvertPrimary: string;
+    SurfaceInvertSubtle: string;
+    SurfaceInvertSecondary: string;
+    SurfaceInvertDisabled: string;
+    SurfaceLockedDefault: string;
+    SurfaceLockedHover: string;
+    SurfaceLockedActive: string;
+    SurfaceLockedDisabled: string;
+    SurfaceLockedWhite: string;
+    SurfaceLockedBlack: string;
+    SurfaceAccentEmphasisHighInfo: string;
+    SurfaceAccentEmphasisHighNegative: string;
+    SurfaceAccentEmphasisHighWarning: string;
+    SurfaceAccentEmphasisHighPositive: string;
+    SurfaceAccentEmphasisHighPurple: string;
+    SurfaceOverlay: string;
+    SurfaceOtherOverlay: string;
+    SurfaceOtherAgent: string;
+    SurfaceOtherSkeleton: string;
+    ContentDefault: string;
+    ContentBasicPrimary: string;
+    ContentSubtle: string;
+    ContentBasicSecondary: string;
+    ContentDisabled: string;
+    ContentBasicDisabled: string;
+    ContentBasicNegative: string;
+    ContentBasicWarning: string;
+    ContentBasicPositive: string;
+    ContentBasicInfo: string;
+    ContentBasicPurple: string;
+    ContentBasicGradient01: string;
+    ContentWhiteLocked: string;
+    ContentLockedWhite: string;
+    ContentBlackLocked: string;
+    ContentLockedBlack: string;
+    ContentLockedDefault: string;
+    ContentLockedHover: string;
+    ContentLockedActive: string;
+    ContentLockedDisabled: string;
+    ContentInvertDefault: string;
+    ContentInvertPrimary: string;
+    ContentInvertSubtle: string;
+    ContentInvertSecondary: string;
+    ContentInvertDisabled: string;
+    ContentInvertGradient01: string;
+    BorderDefault: string;
+    BorderBasicPrimary: string;
+    BorderBasicSecondary: string;
+    BorderSubtle: string;
+    BorderBasicTertiary: string;
+    BorderHover: string;
+    BorderBasicHover: string;
+    BorderDisabled: string;
+    BorderBasicDisabled: string;
+    BorderBasicNegative: string;
+    BorderBasicWarning: string;
+    BorderBasicPositive: string;
+    BorderBasicInfo: string;
+    BorderBasicPurple: string;
+    BorderInvertDefault: string;
+    BorderInvertPrimary: string;
+    BorderInvertSubtle: string;
+    BorderInvertSecondary: string;
+    BorderInvertHover: string;
+    BorderInvertDisabled: string;
+    ColorActionActive: string;
+    ActionPrimaryActive: string;
+    ColorActionHover: string;
+    ActionPrimaryHover: string;
+    ColorActionDefault: string;
+    ActionPrimaryDefault: string;
+    ColorActionDefaultRgb: string;
+    ColorActionDisabled: string;
+    ActionPrimaryDisabled: string;
+    ColorNegativeActive: string;
+    ActionNegativeActive: string;
+    ColorNegativeHover: string;
+    ActionNegativeHover: string;
+    ColorNegativeDefault: string;
+    ActionNegativeDefault: string;
+    ColorNegativeDisabled: string;
+    ActionNegativeDisabled: string;
+    ColorWarningDefault: string;
+    ActionWarningDefault: string;
+    ColorWarningHover: string;
+    ActionWarningHover: string;
+    ColorPositiveDefault: string;
+    ActionPositiveDefault: string;
+    ColorPositiveHover: string;
+    ActionPositiveHover: string;
+    ColorPositiveDisabled: string;
+    ActionPositiveDisabled: string;
+    ActionNeutralDefault: string;
+    ActionNeutralHover: string;
+    ActionNeutralDisabled: string;
+    ColorBot: string;
+    SurfaceOtherBot: 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;
+    ProductsLivechat: string;
+    ProductsHelpdesk: string;
+    ProductsChatbot: string;
+    ProductsKnowledgebase: string;
+    IllustrationsPrimary: string;
+    IllustrationsSecondary: string;
+    IllustrationsStroke: string;
+    TagSurface01: string;
+    TagContent01: string;
+};

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

@@ -0,0 +1 @@
+export declare type Size = 'compact' | 'medium' | 'large';

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

@@ -0,0 +1 @@
+export type { Size } from './constants';

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;
+};

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

@@ -0,0 +1 @@
+export default function (): void;

package/dist/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />