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

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Placement, flip } from '@floating-ui/react-dom';
+export interface IPopoverProps {
+    children?: React.ReactNode;
+    /**
+     * The CSS class for popover container
+     */
+    className?: string;
+    /**
+     * The popover placement related to the trigger element
+     */
+    placement?: Placement;
+    /**
+     * Set popover visibility
+     */
+    isVisible?: boolean;
+    /**
+     * Set the popover placement to keep it in view
+     */
+    flipOptions?: Parameters<typeof flip>[0];
+    /**
+     * Set `false` if the menu is not to be closed with a esc press
+     */
+    closeOnEsc?: boolean;
+    /**
+     * Trigger element
+     */
+    triggerRenderer: () => React.ReactNode;
+    /**
+     * Optional callback called after popover close
+     */
+    onClose?: () => void;
+}
+export declare const Popover: React.FC<IPopoverProps>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { IPopoverProps } from './Popover';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IPopoverProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: {
+    (args: IPopoverProps): React.ReactElement;
+    args: {
+        placement: string;
+        isVisible: boolean;
+    };
+};

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ProgressSize, ProgressStatus } from './constants';
+export interface ProgressBarProps {
+    /**
+     * The CSS class for container
+     */
+    className?: string;
+    /**
+     * Specify the value of current progress bar (0-100)
+     */
+    percent: number;
+    /**
+     * Specify the progress bar status
+     */
+    status?: ProgressStatus;
+    /**
+     * Specify the progress bar size
+     */
+    size?: ProgressSize;
+}
+export declare const ProgressBar: React.ExoticComponent<ProgressBarProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ProgressBarProps } from './ProgressBar';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ProgressBarProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export declare const ProgressBar: {
+    (args: ProgressBarProps): React.ReactElement;
+    args: {
+        percent: number;
+        status: string;
+        size: string;
+    };
+};

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

@@ -1,9 +1,21 @@
 import * as React from 'react';
 import { ProgressSize, ProgressStatus } from './constants';
 export interface ProgressCircleProps {
+    /**
+     * The CSS class for container
+     */
     className?: string;
-    percent: number;
+    /**
+     * Specify the value of current progress circle (0-100)
+     */
+    progressValue: number;
+    /**
+     * Specify the progress circle status
+     */
     status?: ProgressStatus;
+    /**
+     * Specify the progress circle size
+     */
     size?: ProgressSize;
 }
 export declare const ProgressCircle: React.ExoticComponent<ProgressCircleProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ProgressCircleProps } from './ProgressCircle';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ProgressCircleProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export declare const ProgressCircle: {
+    (args: ProgressCircleProps): React.ReactElement;
+    args: {
+        progressValue: number;
+        status: string;
+        size: string;
+    };
+};

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

@@ -0,0 +1,4 @@
+export type ProgressStatus = 'normal' | 'error' | 'success';
+export type ProgressSize = 'small' | 'medium' | 'large';
+export declare const PROGRESS_STATUSES: ProgressStatus[];
+export declare const PROGRESS_SIZES: ProgressSize[];

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

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

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+export interface PromoBannerProps {
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Set the primary button text
+     */
+    buttonText?: string;
+    /**
+     * Set the header text
+     */
+    header: string;
+    /**
+     * Set the image source to display it
+     */
+    img?: string;
+    /**
+     * Specify whether the banner should use a light-themed design
+     */
+    light?: boolean;
+    /**
+     * Set the link button text
+     */
+    linkText?: string;
+    /**
+     * Event handler for primary button press
+     */
+    onButtonClick?: () => void;
+    /**
+     * Event handler for close button press
+     */
+    onClose?: () => void;
+    /**
+     * Event handler for link button press
+     */
+    onLinkClick?: () => void;
+}
+export declare const PromoBanner: React.FC<React.PropsWithChildren<PromoBannerProps>>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { PromoBannerProps } from './PromoBanner';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const PromoBanner: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
+export declare const WithButtons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
+export declare const WithImage: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
+export declare const WithClose: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
+export declare const WithLight: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;

package/dist/{src/components → 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/components/RadioButton/RadioButton.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { RadioButtonProps } from './RadioButton';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export declare const RadioButton: {
+    ({ children, ...args }: RadioButtonProps): React.ReactElement;
+    args: {
+        checked: boolean;
+        disabled: boolean;
+        description: string;
+        children: string;
+    };
+};

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+export interface ISearchInputProps {
+    /**
+     * Makes search expandable after focusing the icon
+     */
+    isCollapsable?: boolean;
+    /**
+     * Specify whether the search should be disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Specify whether the search should have loader visible
+     */
+    isLoading?: boolean;
+    /**
+     * Optional text for placeholder
+     */
+    placeholder?: string;
+    /**
+     * Specify the search size
+     */
+    size?: 'compact' | 'medium' | 'large';
+    /**
+     * Specify the search value
+     */
+    value: string;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * The event handler for onChange
+     */
+    onChange: (value: string) => void;
+}
+export declare const SearchInput: React.FC<ISearchInputProps>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ISearchInputProps } from './Search';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ISearchInputProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Search: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ISearchInputProps>;
+export declare const States: {
+    (args: ISearchInputProps): React.ReactElement;
+    args: {};
+};
+export declare const Sizes: {
+    (args: ISearchInputProps): React.ReactElement;
+    args: {};
+};
+export declare const CollapsableSearch: {
+    (args: ISearchInputProps): React.ReactElement;
+    args: {};
+};

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

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

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { ButtonProps } from '../Button';
+export type ButtonSize = 'compact' | 'medium' | 'large';
+type ButtonElement = {
+    id: string;
+    label: string;
+} & Pick<ButtonProps, 'disabled' | 'loading' | 'icon'>;
+export interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Array of buttons
+     */
+    buttons: ButtonElement[];
+    /**
+     * Set to make buttons fill the container if there is free space
+     */
+    fullWidth?: boolean;
+    /**
+     * Specify the buttons size
+     */
+    size?: ButtonSize;
+    /**
+     * Id of initially selected button
+     */
+    initialId?: string;
+    /**
+     * Id of current selected button
+     */
+    currentId?: string;
+    /**
+     * Handler for onClick on specific button
+     */
+    onButtonClick?: (id: string, event: React.MouseEvent<HTMLElement>) => void;
+}
+export declare const SegmentedControl: React.FC<SegmentedControlProps>;
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { SegmentedControlProps } from './SegmentedControl';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, SegmentedControlProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: Story<SegmentedControlProps>;
+export declare const Uncontrolled: Story<SegmentedControlProps>;

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

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

package/dist/{src/components → 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 type SwitchSize = 'compact' | 'medium' | 'large';
+export 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/components/Switch/Switch.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { SwitchProps } from './Switch';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, SwitchProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: Story<SwitchProps>;
+export declare const States: Story;
+export declare const Availability: Story;
+export declare const Sizes: Story;

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { TabProps } from './Tab';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+} & {
+    count?: number | undefined;
+    isSelected?: boolean | undefined;
+    asBadge?: boolean | undefined;
+    size?: import("../..").Size | undefined;
+} & {
+    children?: React.ReactNode;
+}> | import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: undefined;
+} & {
+    count?: number | undefined;
+    isSelected?: boolean | undefined;
+    asBadge?: boolean | undefined;
+    size?: import("../..").Size | undefined;
+} & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+type ITabArgs = TabProps;
+export declare const Tab: {
+    (args: ITabArgs): React.ReactElement;
+    args: TabProps;
+};
+export declare const StatesAndVariants: () => JSX.Element;
+export declare const Sizes: () => JSX.Element;

package/dist/components/Tab/TabsWrapper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Tab/TabsWrapper.stories.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+type ITabArgs = {
+    items: Array<{
+        id: string;
+        title: string;
+        count: number;
+        asBadge?: boolean;
+        isDisabled?: boolean;
+    }>;
+};
+export declare const TabsWrapper: {
+    ({ items }: ITabArgs): React.ReactElement;
+    args: ITabArgs;
+};

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { IconSize, IconSource } from '../Icon';
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the tag kind
+     */
+    kind?: 'default' | 'info' | 'warning' | 'success' | 'error' | 'purple' | 'black';
+    /**
+     * Specify the tag size
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Specify the tag icon size if used
+     */
+    iconSize?: IconSize;
+    /**
+     * Set the tag custom color
+     */
+    customColor?: string;
+    /**
+     * Set to show close icon
+     */
+    dismissible?: boolean;
+    /**
+     * Outlined version of tag
+     */
+    outline?: boolean;
+    /**
+     * The event handler for close icon click
+     */
+    onRemove?(): void;
+    /**
+     * Pass the icon to show it
+     */
+    icon?: IconSource;
+    /**
+     * Pass the image source to show it as avatar
+     */
+    avatar?: string;
+}
+export declare const Tag: React.FC<React.PropsWithChildren<TagProps>>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { TagProps } from './Tag';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TagProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: {
+    ({ children, ...args }: TagProps): React.ReactElement;
+    args: TagProps;
+};
+export declare const Kinds: {
+    ({ children, ...args }: TagProps): React.ReactElement;
+    args: {
+        children: string;
+        icon: any;
+    };
+};
+export declare const Sizes: {
+    ({ children, ...args }: TagProps): React.ReactElement;
+    args: {
+        children: string;
+        icon: any;
+    };
+};

package/dist/{src/components → components}/TagInput/EmailTagInput.d.ts

@@ -1,5 +1,5 @@
 import { TagInputProps } from './TagInput';
 import * as React from 'react';
-export declare type EmailTagInputProps = Omit<TagInputProps, 'validator'>;
+export type EmailTagInputProps = Omit<TagInputProps, 'validator'>;
 export declare const emailRegex: RegExp;
 export declare const EmailTagInput: React.FC<EmailTagInputProps>;

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

@@ -0,0 +1,32 @@
+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';
+}
+export declare const TagInput: React.FC<TagInputProps>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { TagInputProps, EmailTagInputProps } from './index';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TagInputProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const DefaultTagInput: Story<TagInputProps>;
+export declare const DefaultEmailTagInput: Story<EmailTagInputProps>;
+export declare const Sizes: () => JSX.Element;

package/dist/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/components/Textarea/Textarea.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Textarea/Textarea.stories.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { TextareaProps } from './Textarea';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default _default;
+export declare const Default: Story<TextareaProps>;
+export declare const States: () => JSX.Element;

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

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

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+type ToastKind = 'success' | 'warning' | 'error' | 'info';
+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<React.PropsWithChildren<ToastProps>>;
+export {};

package/dist/components/Toast/Toast.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Toast/Toast.stories.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { ToastProps } from './Toast';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ToastProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: Story<ToastProps>;
+export declare const Kinds: Story;
+export declare const WithCloseIcon: Story;
+export declare const WithCustomAction: {
+    (): JSX.Element;
+    parameters: import("@storybook/types").Parameters;
+};