@livechat/design-system-react-components 1.17.1 → 1.18.0

package/dist/components/Skeleton/SkeletonAvatar.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface ISkeletonAvatar {
+    /**
+     * Specify if the element is square shape
+     */
+    square?: boolean;
+    /**
+     * Specify the size of the element (wdith and height in px)
+     */
+    size?: number;
+    /**
+     * Specify if the animation is enabled
+     */
+    animated?: boolean;
+}
+export declare const SkeletonAvatar: React.FC<ISkeletonAvatar>;

package/dist/components/Skeleton/SkeletonText.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface ISkeletonText {
+    /**
+     * Specify the height of the element
+     */
+    height?: number;
+    /**
+     * Specify the width of the element
+     */
+    width?: number;
+    /**
+     * Specify if the animation is enabled
+     */
+    animated?: boolean;
+}
+export declare const SkeletonText: React.FC<ISkeletonText>;

package/dist/components/Skeleton/SkeletonWrapper.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface ISkeletonWrapper extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The children elements to be wrapped by the skeleton wrapper
+     */
+    children: React.ReactNode;
+    /**
+     * Specify if the skeleton wrapper should display children elements vertically
+     */
+    vertical?: boolean;
+    /**
+     * Specify if the animation is enabled, it will be passed to the children skeleton components
+     */
+    animated?: boolean;
+}
+export declare const SkeletonWrapper: React.FC<ISkeletonWrapper>;

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

@@ -0,0 +1,3 @@
+export { SkeletonWrapper } from './SkeletonWrapper';
+export { SkeletonAvatar } from './SkeletonAvatar';
+export { SkeletonText } from './SkeletonText';

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

@@ -1,50 +1,3 @@
 import * as React from 'react';
-import { TagKind, TagSize } from './types';
-export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Specify the tag kind
-     */
-    kind?: TagKind;
-    /**
-     * Specify the tag size
-     */
-    size?: TagSize;
-    /**
-     * Set the tag custom color
-     */
-    customColor?: string;
-    /**
-     * Set to show close icon
-     * @deprecated The close icon will be visible by providing the `onRemove` prop and this flag will no longer be needed
-     */
-    dismissible?: boolean;
-    /**
-     * Set to show close icon on hover only if the `onRemove` prop is provided
-     */
-    dismissibleOnHover?: boolean;
-    /**
-     * Set to hide close icon if the `onRemove` prop is provided
-     */
-    disabled?: boolean;
-    /**
-     * Outlined version of tag
-     */
-    outline?: boolean;
-    /**
-     * The event handler for close icon click, if provided the close icon will be visible
-     */
-    onRemove?(e: React.MouseEvent): void;
-    /**
-     * React node element to show on the left
-     */
-    leftNode?: React.ReactElement;
-    /**
-     * React node element to show on the right
-     */
-    rightNode?: React.ReactElement;
-    /**
-     * Set to show the tag as square (only if you want use icon without text)
-     */
-    iconOnly?: boolean;
-}
+import { TagProps } from './types';
 export declare const Tag: React.FC<React.PropsWithChildren<TagProps>>;

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

@@ -1,3 +1,3 @@
 export { Tag } from './Tag';
-export type { TagProps } from './Tag';
 export type { TagKind, TagSize } from './types';
+export type { TagProps } from './types';

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

@@ -1,3 +1,55 @@
+import * as React from 'react';
 import { kinds, sizes } from './constants';
 export type TagKind = (typeof kinds)[number];
 export type TagSize = (typeof sizes)[number];
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the tag kind
+     */
+    kind?: TagKind;
+    /**
+     * Specify the tag size
+     */
+    size?: TagSize;
+    /**
+     * Set the tag custom color
+     */
+    customColor?: string;
+    /**
+     * Set to show close icon
+     * @deprecated The close icon will be visible by providing the `onRemove` prop and this flag will no longer be needed
+     */
+    dismissible?: boolean;
+    /**
+     * Set to show close icon on hover only if the `onRemove` prop is provided
+     */
+    dismissibleOnHover?: boolean;
+    /**
+     * Set to hide close icon if the `onRemove` prop is provided
+     */
+    disabled?: boolean;
+    /**
+     * Outlined version of tag
+     */
+    outline?: boolean;
+    /**
+     * The event handler for close icon click, if provided the close icon will be visible
+     */
+    onRemove?(e: React.MouseEvent): void;
+    /**
+     * React node element to show on the left
+     */
+    leftNode?: React.ReactElement;
+    /**
+     * React node element to show on the right
+     */
+    rightNode?: React.ReactElement;
+    /**
+     * Set to show the tag as square (only if you want use icon without text)
+     */
+    iconOnly?: boolean;
+    /**
+     * Set text value for the tag. You can use this or `children` prop. If both are provided, `value` prop will be used.
+     */
+    value?: string;
+}

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

@@ -1,40 +1,3 @@
 import * as React from 'react';
-export interface TagInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
-    /**
-     * Set the id for input
-     */
-    id?: string;
-    /**
-     * Set the error message
-     */
-    error?: string;
-    /**
-     * Array of defined tags
-     */
-    tags?: string[];
-    /**
-     * The event handler for modify tags array
-     */
-    onChange: (tags: string[]) => void;
-    /**
-     * Set the input placeholder
-     */
-    placeholder?: string;
-    /**
-     * Set the custom validation for provided items
-     */
-    validator?: (val: string) => boolean;
-    /**
-     * Specify the input size
-     */
-    size?: 'medium' | 'large';
-    /**
-     * Set the input custom class
-     */
-    inputClassName?: string;
-    /**
-     * Add Tag on blur
-     */
-    addOnBlur?: boolean;
-}
-export declare const TagInput: React.FC<TagInputProps>;
+import { TagInputProps, TagInputValues } from './types';
+export declare const TagInput: <T extends TagInputValues>({ id, tags, onChange, validator, error, placeholder, size, className, inputClassName, onBlur, addOnBlur, ...props }: TagInputProps<T>) => React.ReactElement;

package/dist/components/TagInput/{EditableTag.d.ts → components/EditableTag.d.ts}

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TagProps } from '../../Tag';
 export interface EditableTagProps extends React.HTMLAttributes<HTMLDivElement> {
     inputRef: React.RefObject<HTMLInputElement>;
     index: number;
@@ -7,5 +8,6 @@ export interface EditableTagProps extends React.HTMLAttributes<HTMLDivElement> {
     validator?: (val: string) => boolean;
     children: string;
     size: 'medium' | 'large';
+    tagProps?: TagProps;
 }
 export declare const EditableTag: React.FC<EditableTagProps>;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { TagInputProps, TagInputValues } from '../types';
+export type EmailTagInputProps<T> = Omit<TagInputProps<T>, 'validator'>;
+export declare const emailRegex: RegExp;
+export declare const EmailTagInput: <T extends TagInputValues>({ placeholder, ...props }: EmailTagInputProps<T>) => React.ReactElement;

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

@@ -1,4 +1,4 @@
 export { TagInput } from './TagInput';
-export type { TagInputProps } from './TagInput';
-export { EmailTagInput } from './EmailTagInput';
-export type { EmailTagInputProps } from './EmailTagInput';
+export { EmailTagInput } from './components/EmailTagInput';
+export type { EmailTagInputProps } from './components/EmailTagInput';
+export type { TagInputProps } from './types';

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { TagProps } from '../Tag';
+export interface TagInputProps<T> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    /**
+     * Set the id for input
+     */
+    id?: string;
+    /**
+     * Set the error message
+     */
+    error?: string;
+    /**
+     * Array of defined tags
+     */
+    tags?: T[];
+    /**
+     * The event handler for modify tags array
+     */
+    onChange: (tags: T[]) => void;
+    /**
+     * Set the input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Set the custom validation for provided items
+     */
+    validator?: (val: string) => boolean;
+    /**
+     * Specify the input size
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Set the input custom class
+     */
+    inputClassName?: string;
+    /**
+     * Add Tag on blur
+     */
+    addOnBlur?: boolean;
+}
+export type TagInputValues = string | Omit<TagProps, 'onRemove' | 'dismissible'>;

package/dist/components/Typography/Display.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TDisplaySize } from './types';
+import { TDisplaySize, TTextAlign } from './types';
 interface IProps {
     /** Size of the text */
     size?: TDisplaySize;
@@ -7,6 +7,10 @@ interface IProps {
     as?: string;
     /** Optional custom className */
     className?: string;
+    /** Optional prop to set the custom color */
+    customColor?: string;
+    /** Optional prop to set the text align */
+    textAlign?: TTextAlign;
 }
 export declare const Display: React.FC<React.PropsWithChildren<IProps>>;
 export {};

package/dist/components/Typography/Heading.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { THeadingSize } from './types';
+import { THeadingSize, TTextAlign } from './types';
 interface IProps extends React.HTMLAttributes<HTMLElement> {
     size?: THeadingSize;
     /** DOM element name that will be rendered */
@@ -10,6 +10,10 @@ interface IProps extends React.HTMLAttributes<HTMLElement> {
     uppercase?: boolean;
     /** Optional prop to set the bold */
     bold?: boolean;
+    /** Optional prop to set the custom color */
+    customColor?: string;
+    /** Optional prop to set the text align */
+    textAlign?: TTextAlign;
 }
 export declare const Heading: React.FC<React.PropsWithChildren<IProps>>;
 export {};

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TTextSize } from './types';
+import { TTextAlign, TTextSize } from './types';
 interface IProps extends React.HTMLAttributes<HTMLElement> {
     /** DOM element name that will be rendered */
     as?: string;
@@ -20,6 +20,10 @@ interface IProps extends React.HTMLAttributes<HTMLElement> {
     underline?: boolean;
     /** Optional prop to set the strike */
     strike?: boolean;
+    /** Optional prop to set the custom color */
+    customColor?: string;
+    /** Optional prop to set the text align */
+    textAlign?: TTextAlign;
 }
 export declare const Text: React.FC<React.PropsWithChildren<IProps>>;
 export {};

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

@@ -1,3 +1,4 @@
 export type TTextSize = 'xs' | 'sm' | 'md';
 export type THeadingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type TDisplaySize = 'sm' | 'md' | 'max';
+export type TTextAlign = 'left' | 'right' | 'center' | 'justify';

package/dist/foundations/design-token.d.ts

@@ -40,6 +40,18 @@ export declare const DesignToken: {
     SurfaceAccentEmphasisMinWarning: string;
     SurfaceAccentEmphasisMinPositive: string;
     SurfaceAccentEmphasisMinPurple: string;
+    SurfaceAccentOndarkNegativeDefault: string;
+    SurfaceAccentOndarkNegativeHover: string;
+    SurfaceAccentOndarkWarningDefault: string;
+    SurfaceAccentOndarkWarningHover: string;
+    SurfaceAccentOndarkInfoDefault: string;
+    SurfaceAccentOndarkInfoHover: string;
+    SurfaceAccentOndarkPositiveDefault: string;
+    SurfaceAccentOndarkPositiveHover: string;
+    SurfaceAccentEmphasisSubtleNegative: string;
+    SurfaceAccentEmphasisSubtleWarning: string;
+    SurfaceAccentEmphasisSubtleInfo: string;
+    SurfaceAccentEmphasisSubtlePositive: string;
     SurfaceInvertDefault: string;
     SurfaceInvertPrimary: string;
     SurfaceInvertSubtle: string;
@@ -70,10 +82,16 @@ export declare const DesignToken: {
     SurfaceGradient09: string;
     SurfaceGradient10: string;
     SurfaceGradient11: string;
+    SurfaceGradient12: string;
+    SurfaceGradient13: string;
     SurfaceOtherOverlay: string;
     SurfaceOtherAgent: string;
     SurfaceOtherAgentHover: string;
     SurfaceOtherSkeleton: string;
+    SurfaceOtherInternalNote: string;
+    SurfaceOtherInternalNoteHover: string;
+    SurfaceOtherVisitor: string;
+    SurfaceOtherVisitorHover: string;
     ContentDefault: string;
     ContentBasicPrimary: string;
     ContentSubtle: string;
@@ -236,6 +254,8 @@ export declare const DesignToken: {
     DecorPurple200: string;
     DecorPurple100: string;
     DecorPurple50: string;
+    DecorBrown50: string;
+    DecorBrown300: string;
     ProductsLivechat: string;
     ProductsHelpdesk: string;
     ProductsChatbot: string;
@@ -276,5 +296,8 @@ export declare const DesignToken: {
     SurfaceAvatar10: string;
     NavbarBackground: string;
     TooltipBorder: string;
+    AnimatedGradientValue1: string;
+    AnimatedGradientValue2: string;
+    AnimatedGradientValue3: string;
 };
 export type DesignTokenKey = keyof typeof DesignToken;