@livechat/design-system-react-components 1.0.0-alpha.5 → 1.0.0-alpha.51

package/dist/src/components/Progress/ProgressBar.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ProgressSize, ProgressStatus } from './constants';
+export interface ProgressBarProps {
+    className?: string;
+    percent: number;
+    status?: ProgressStatus;
+    size?: ProgressSize;
+}
+export declare const ProgressBar: React.ExoticComponent<ProgressBarProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/Progress/ProgressCircle.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ProgressSize, ProgressStatus } from './constants';
 export interface ProgressCircleProps {
     className?: string;
-    percent: number;
+    progressValue: number;
     status?: ProgressStatus;
     size?: ProgressSize;
 }

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

@@ -1,12 +1,4 @@
-export declare const enum ProgressStatus {
-    Normal = "normal",
-    Error = "error",
-    Success = "success"
-}
-export declare const enum ProgressSize {
-    Small = "small",
-    Medium = "medium",
-    Large = "large"
-}
+export declare type ProgressStatus = 'normal' | 'error' | 'success';
+export declare type ProgressSize = 'small' | 'medium' | 'large';
 export declare const PROGRESS_STATUSES: ProgressStatus[];
 export declare const PROGRESS_SIZES: ProgressSize[];

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

@@ -1 +1,2 @@
 export { ProgressCircle } from './ProgressCircle';
+export { ProgressBar } from './ProgressBar';

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

@@ -1,9 +1,4 @@
 import * as React from 'react';
-export declare const enum PromoBannerSize {
-    Small = "small",
-    Medium = "medium",
-    Large = "large"
-}
 export interface PromoBannerProps {
     className?: string;
     buttonText?: string;
@@ -11,9 +6,8 @@ export interface PromoBannerProps {
     img?: string;
     light?: boolean;
     linkText?: string;
-    size?: PromoBannerSize;
     onButtonClick?: () => void;
     onClose?: () => void;
     onLinkClick?: () => void;
 }
-export declare const PromoBanner: React.FC<PromoBannerProps>;
+export declare const PromoBanner: React.FC<React.PropsWithChildren<PromoBannerProps>>;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface RadioButtonProps extends React.HTMLAttributes<HTMLInputElement> {
-    description?: React.ReactNode;
+    description?: string;
     checked?: boolean;
     disabled?: boolean;
 }
-export declare const RadioButton: React.FC<RadioButtonProps>;
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ISearchInputProps {
+    isCollapsable?: boolean;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    placeholder?: string;
+    size?: 'compact' | 'medium' | 'large';
+    value: string;
+    className?: string;
+    onChange: (value: string) => void;
+}
+export declare const SearchInput: React.FC<ISearchInputProps>;

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

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

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ButtonProps } from '../Button';
+export declare type ButtonSize = 'compact' | 'medium' | 'large';
+declare type ButtonElement = {
+    id: string;
+    label: string;
+} & Pick<ButtonProps, 'disabled' | 'loading' | 'icon'>;
+export interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    buttons: ButtonElement[];
+    fullWidth?: boolean;
+    size?: ButtonSize;
+    initialId?: string;
+    currentId?: string;
+    onButtonClick?: (id: string, event: React.MouseEvent<HTMLElement>) => void;
+}
+export declare const SegmentedControl: React.FC<SegmentedControlProps>;
+export {};

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

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

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

@@ -1,13 +1,9 @@
 import * as React from 'react';
-export declare const enum SwitchSize {
-    Basic = "basic",
-    Compact = "compact"
-}
-export declare const enum SwitchStyles {
-    Enabled = "enabled",
-    Disabled = "disabled"
-}
+export declare const baseClass = "switch";
+export declare type SwitchSize = 'compact' | 'medium' | 'large';
+export declare type SwitchState = 'regular' | 'loading' | 'locked';
 export interface SwitchProps {
+    ariaLabel?: string;
     className?: string;
     defaultOn?: boolean;
     disabled?: boolean;
@@ -16,5 +12,6 @@ export interface SwitchProps {
     on?: boolean;
     onChange?(e: React.FormEvent, value: boolean): void;
     size?: SwitchSize;
+    state?: SwitchState;
 }
 export declare const Switch: React.FC<SwitchProps>;

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

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

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

@@ -1,12 +1,14 @@
 import * as React from 'react';
+import { IconSize, IconSource } from '../Icon';
 export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
-    kind?: 'default' | 'info' | 'warning' | 'success' | 'error';
+    kind?: 'default' | 'info' | 'warning' | 'success' | 'error' | 'purple' | 'black';
     size?: 'medium' | 'large';
+    iconSize?: IconSize;
     customColor?: string;
     dismissible?: boolean;
     outline?: boolean;
     onRemove?(): void;
-    icon?: React.FC<React.SVGProps<SVGSVGElement>> | string;
+    icon?: IconSource;
     avatar?: string;
 }
-export declare const Tag: React.FC<TagProps>;
+export declare const Tag: React.FC<React.PropsWithChildren<TagProps>>;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 declare type Tags = string[];
 export interface TagInputProps {
+    id?: string;
     error?: string;
     tags?: Tags;
     onChange: (tags: Tags) => void;

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

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

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

@@ -1,14 +1,7 @@
 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"
-}
+declare type HorizontalPosition = 'left' | 'center' | 'right';
+declare type VerticalPosition = 'top' | 'bottom';
 export declare const ANIMATION_TIME = 200;
 interface Toast extends ToastProps {
     id: string;

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,23 @@
+import * as React from 'react';
+import { ButtonKind } from '../Button';
+export declare const Interactive: React.FC<{
+    header?: string;
+    text: string;
+    image?: {
+        src: string;
+        alt: string;
+    };
+    closeWithX?: boolean;
+    theme?: 'invert' | 'important';
+    handleCloseAction?: (ev: React.MouseEvent) => void;
+    primaryButton: {
+        handleClick: () => void;
+        label: string;
+        kind?: ButtonKind;
+    };
+    secondaryButton: {
+        handleClick: () => void;
+        label: string;
+        kind?: ButtonKind;
+    };
+}>;

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

@@ -7,5 +7,5 @@ interface IProps {
     /** Optional custom className */
     className?: string;
 }
-export declare const Heading: React.FC<IProps>;
+export declare const Heading: React.FC<React.PropsWithChildren<IProps>>;
 export {};

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

@@ -11,5 +11,5 @@ interface IProps {
     underline?: boolean;
     strike?: boolean;
 }
-export declare const Text: React.FC<IProps>;
+export declare const Text: React.FC<React.PropsWithChildren<IProps>>;
 export {};

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<React.PropsWithChildren<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/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.mdx' {
+  const content: string;
+  export default content;
+}

package/dist/src/index.d.ts

@@ -1,29 +1,41 @@
-export { DesignTokens } from './themes/designTokens';
+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/ButtonGroup';
+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/InputField';
+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/TextField';
+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/{designTokens.d.ts → design-token.d.ts}

@@ -1,51 +1,142 @@
-export declare const DesignTokens: {
+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;
-    SurfaceSecondaryDefault: string;
+    SurfacePrimaryDisabled: string;
+    SurfaceTertiaryDefault: string;
     SurfaceSecondarySubtle: string;
-    SurfaceSecondaryHover: string;
-    SurfaceSecondaryDisabled: 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;
@@ -123,4 +214,13 @@ export declare const DesignTokens: {
     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';