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

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

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';
     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>;

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,21 +1,15 @@
 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>;

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,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/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

@@ -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';