@livechat/design-system-react-components 1.5.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livechat/design-system-react-components",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -74,7 +74,7 @@
     "@floating-ui/react-dom": "^0.7.0",
     "@floating-ui/react-dom-interactions": "^0.6.1",
     "@livechat/data-utils": "^0.2.16",
-    "@livechat/design-system-icons": "^1.3.0",
+    "@livechat/design-system-icons": "^1.6.1",
     "@popperjs/core": "^2.11.2",
     "clsx": "^1.1.1",
     "date-fns": "^2.28.0",
@@ -84,5 +84,5 @@
     "react-day-picker": "^7.4.10",
     "react-transition-group": "^4.4.2"
   },
-  "gitHead": "0ebbdd16acc3575b9f2bd22a71bbbf7a20efc949"
+  "gitHead": "85102fc6ec77b94001165d8442c6d08f528e5489"
 }

package/dist/components/ActionBar/ActionBar.d.ts

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { IActionBarOption } from './ActionBarItem';
-export interface IActionBarProps {
-    /**
-     * The CSS class for menu container
-     */
-    className?: string;
-    /**
-     * The unique id key
-     */
-    id?: string;
-    /**
-     * Array of action bar options
-     */
-    options: IActionBarOption[];
-    /**
-     * Set the key for active element
-     */
-    activeOptionKey?: string | null;
-    /**
-     * Set 'scroll' to disable menu and enable scroll
-     */
-    type?: 'menu' | 'scroll';
-}
-export declare const ActionBar: React.FC<IActionBarProps>;

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

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

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

@@ -1,10 +0,0 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./ActionBar").IActionBarProps>;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const Default: () => React.ReactElement;

package/dist/components/ActionBar/ActionBarItem.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-export type IActionBarOption = {
-    key: string;
-    element: React.ReactElement;
-    label: string;
-    showTooltip?: boolean;
-    onClick: () => void;
-};
-interface ActionBarItem {
-    option: IActionBarOption;
-    menuItemsKeys: string[];
-    activeOptionKey?: string | null;
-}
-export declare const ActionBarItem: React.FC<ActionBarItem>;
-export {};

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

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

package/dist/components/ActionMenu/ActionMenu.d.ts

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { Placement, flip } from '@floating-ui/react';
-import { IActionMenuOption } from './types';
-export interface ActionMenuProps {
-    /**
-     * The CSS class for menu container
-     */
-    className?: string;
-    /**
-     * The CSS class for trigger container
-     */
-    triggerClassName?: string;
-    /**
-     * Array of menu options
-     */
-    options: IActionMenuOption[];
-    /**
-     * Trigger element
-     */
-    triggerRenderer: React.ReactElement;
-    /**
-     * The menu placement
-     */
-    placement?: Placement;
-    /**
-     * Will open menu on component initialization
-     */
-    openedOnInit?: boolean;
-    /**
-     * Menu will stay open after option click
-     */
-    keepOpenOnClick?: boolean;
-    /**
-     * Set the menu placement to keep it in view
-     */
-    flipOptions?: Parameters<typeof flip>[0];
-    /**
-     * Set to control the menu visibility
-     */
-    visible?: boolean;
-    /**
-     * Optional handler called on menu close
-     */
-    onClose?: () => void;
-    /**
-     * Optional handler called on menu open
-     */
-    onOpen?: () => void;
-}
-export declare const ActionMenu: React.FC<ActionMenuProps>;

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

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

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

@@ -1,11 +0,0 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./ActionMenu").ActionMenuProps>;
-    subcomponents: {
-        ActionMenuItem: React.FC<React.PropsWithChildren<import("./ActionMenuItem").ActionMenuItemProps>>;
-    };
-};
-export default _default;
-export declare const Default: () => React.ReactElement;
-export declare const KeepOpenOnItemClick: () => React.ReactElement;

package/dist/components/ActionMenu/ActionMenuItem.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-export interface ActionMenuItemProps {
-    /**
-     * Renders given element on the left of element
-     */
-    leftNode?: React.ReactNode;
-    /**
-     * Renders given element on the right of element
-     */
-    rightNode?: React.ReactNode;
-    /**
-     * Specify the kind of menu item
-     */
-    kind?: 'warning' | undefined;
-}
-export declare const ActionMenuItem: React.FC<React.PropsWithChildren<ActionMenuItemProps>>;

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

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import noop from '../../utils/noop';
-export declare const exampleOptions: ({
-    key: string;
-    element: React.JSX.Element;
-    onClick: typeof noop;
-    disabled?: undefined;
-    withDivider?: undefined;
-} | {
-    key: string;
-    element: React.JSX.Element;
-    disabled: boolean;
-    withDivider: boolean;
-    onClick: typeof noop;
-})[];

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

@@ -1,3 +0,0 @@
-export { ActionMenu } from './ActionMenu';
-export { ActionMenuItem } from './ActionMenuItem';
-export type { IActionMenuOption } from './types';

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

@@ -1,9 +0,0 @@
-import * as React from 'react';
-export interface IActionMenuOption {
-    key: string;
-    element: React.ReactNode;
-    groupHeader?: boolean;
-    disabled?: boolean;
-    withDivider?: boolean;
-    onClick?: () => void;
-}

package/dist/components/Alert/Alert.d.ts

@@ -1,32 +0,0 @@
-import * as React from 'react';
-type AlertKind = 'info' | 'warning' | 'success' | 'error';
-export interface AlertProps {
-    /**
-     * The CSS class for container
-     */
-    className?: string;
-    /**
-     * Specify the kind of Alert
-     */
-    kind?: AlertKind;
-    /**
-     * Shows the primary CTA button
-     */
-    primaryButton?: {
-        handleClick: () => void;
-        label: string;
-    };
-    /**
-     * Shows the secondary CTA button
-     */
-    secondaryButton?: {
-        handleClick: () => void;
-        label: string;
-    };
-    /**
-     * The optional event handler for close button
-     */
-    onClose?: () => void;
-}
-export declare const Alert: React.FC<React.PropsWithChildren<AlertProps>>;
-export {};

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

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

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

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { AlertProps } from './Alert';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, AlertProps & {
-    children?: React.ReactNode;
-}>;
-export default _default;
-export declare const Default: (args: AlertProps) => React.ReactElement;
-export declare const Kinds: () => React.ReactElement;
-export declare const WithCTA: () => React.ReactElement;

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

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

package/dist/components/Avatar/Avatar.d.ts

@@ -1,49 +0,0 @@
-import * as React from 'react';
-type AvatarShape = 'circle' | 'rounded-square';
-type AvatarSize = 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
-type AvatarStatus = 'available' | 'unavailable' | 'unknown';
-type AvatarType = 'image' | 'text';
-export interface AvatarProps {
-    /**
-     * Alternate text for an image avatar
-     */
-    alt?: string;
-    /**
-     * The CSS class for container
-     */
-    className?: string;
-    /**
-     * Specify the background color
-     */
-    color?: string;
-    /**
-     * Specify the avatar shape
-     */
-    shape?: AvatarShape;
-    /**
-     * Specify the avatar size
-     */
-    size?: AvatarSize;
-    /**
-     * Image source for the image avatar
-     */
-    src?: string;
-    /**
-     * Displays status dot
-     */
-    status?: AvatarStatus;
-    /**
-     * Text for an text avatar
-     */
-    text?: string;
-    /**
-     * Specify the avatar type
-     */
-    type: AvatarType;
-    /**
-     * Displays rim
-     */
-    withRim?: boolean;
-}
-export declare const Avatar: React.FC<AvatarProps>;
-export {};

package/dist/components/Avatar/Avatar.helpers.d.ts

@@ -1,3 +0,0 @@
-export declare function getBackgroundColor(text?: string): string | undefined;
-export declare function getInitials(name?: string, count?: number): string;
-export declare function getFontColor(color: string): string;

package/dist/components/Avatar/Avatar.helpers.spec.d.ts

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

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

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

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

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { AvatarProps } from './Avatar';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, AvatarProps & {
-    children?: React.ReactNode;
-}>;
-export default _default;
-export declare const Default: {
-    (args: AvatarProps): React.ReactElement;
-    args: {
-        type: string;
-        text: string;
-    };
-};
-export declare const Types: () => React.ReactElement;
-export declare const Shapes: () => React.ReactElement;
-export declare const Sizes: () => React.ReactElement;
-export declare const Statuses: () => React.ReactElement;
-export declare const Colors: () => React.ReactElement;
-export declare const FallbackAvatar: () => React.ReactElement;
-export declare const Rim: () => React.ReactElement;
-export declare const SizesWithStatus: () => React.ReactElement;
-export declare const SizesWithRim: () => React.ReactElement;

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

@@ -1,3 +0,0 @@
-export { Avatar } from './Avatar';
-export { getBackgroundColor as generateAvatarColor } from './Avatar.helpers';
-export type { AvatarProps } from './Avatar';

package/dist/components/Badge/Badge.d.ts

@@ -1,24 +0,0 @@
-import * as React from 'react';
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Value to display
-     */
-    count?: number;
-    /**
-     * Specify the badge kind
-     */
-    kind?: 'primary' | 'secondary' | 'tertiary';
-    /**
-     * The maximum value after which a "+" will be displayed next to the number
-     */
-    max?: number;
-    /**
-     * Specify the badge size
-     */
-    size?: 'large' | 'medium' | 'compact';
-    /**
-     * Specify the badge type
-     */
-    type?: 'counter' | 'alert' | 'dot';
-}
-export declare const Badge: React.FC<BadgeProps>;

package/dist/components/Badge/Badge.helpers.d.ts

@@ -1 +0,0 @@
-export declare function formatCount(count: number, max: number): string;

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

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

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

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { Story } from '@storybook/react';
-import { BadgeProps } from './Badge';
-declare const _default: {
-    title: string;
-    component: React.FC<BadgeProps>;
-};
-export default _default;
-export declare const Default: Story<BadgeProps>;
-export declare const Sizes: () => React.ReactElement;
-export declare const Kinds: () => React.ReactElement;
-export declare const Types: () => React.ReactElement;

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

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

package/dist/components/Button/Button.d.ts

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { Size } from 'utils';
-import { ButtonKind } from './types';
-export type ButtonProps = {
-    /**
-     * Specify the button kind
-     */
-    kind?: ButtonKind;
-    /**
-     * Specify the button size
-     */
-    size?: Size;
-    /**
-     * Set the loading state
-     */
-    loading?: boolean;
-    /**
-     * Set the button for full width
-     */
-    fullWidth?: boolean;
-    /**
-     * Text displayed in loading state
-     */
-    loaderLabel?: string;
-    /**
-     * Renders given element
-     */
-    icon?: React.ReactElement;
-    /**
-     * Specify the place to render element given in `icon` prop
-     */
-    iconPosition?: 'left' | 'right';
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare const Button: React.ForwardRefExoticComponent<{
-    /**
-     * Specify the button kind
-     */
-    kind?: ButtonKind | undefined;
-    /**
-     * Specify the button size
-     */
-    size?: Size | undefined;
-    /**
-     * Set the loading state
-     */
-    loading?: boolean | undefined;
-    /**
-     * Set the button for full width
-     */
-    fullWidth?: boolean | undefined;
-    /**
-     * Text displayed in loading state
-     */
-    loaderLabel?: string | undefined;
-    /**
-     * Renders given element
-     */
-    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    /**
-     * Specify the place to render element given in `icon` prop
-     */
-    iconPosition?: "right" | "left" | undefined;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;

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

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

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

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { ButtonProps } from './Button';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
-    kind?: import("./types").ButtonKind | undefined;
-    size?: import("../..").Size | undefined;
-    loading?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    loaderLabel?: string | undefined;
-    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    iconPosition?: "right" | "left" | undefined;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
-export default _default;
-export declare const Default: {
-    (args: ButtonProps): React.ReactElement;
-    argTypes: {
-        icon: {
-            options: string[];
-            mapping: {
-                [k: string]: React.JSX.Element;
-            } & {
-                None: null;
-            };
-            control: {
-                type: string;
-                labels: string[];
-            };
-        };
-    };
-    args: {
-        loading: boolean;
-        disabled: boolean;
-        size: string;
-        kind: string;
-        children: string;
-        fullWidth: boolean;
-        iconPosition: string;
-        icon: string;
-    };
-};
-export declare const KindsAndStates: () => React.ReactElement;
-export declare const Sizes: () => React.ReactElement;
-export declare const ButtonAsLink: () => React.ReactElement;

package/dist/components/Button/helpers.d.ts

@@ -1,2 +0,0 @@
-import { ButtonKind } from './types';
-export declare const getSpinnerColors: (kind: ButtonKind) => Record<string, string> | undefined;

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

@@ -1,3 +0,0 @@
-export { Button } from './Button';
-export type { ButtonProps } from './Button';
-export type { ButtonKind } from './types';

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

@@ -1 +0,0 @@
-export type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'destructive-outline' | 'text' | 'link' | 'link-light' | 'link-inverted' | 'plain' | 'float' | 'dotted' | 'high-contrast';

package/dist/components/Card/Card.d.ts

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { ButtonProps } from '../Button';
-export type CardButtonOptions = Pick<ButtonProps, 'children' | 'kind' | 'onClick'>;
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Alternate text for an image card
-     */
-    alt?: string;
-    /**
-     * Array of card buttons
-     */
-    buttonsOptions?: CardButtonOptions[];
-    /**
-     * Card description
-     */
-    description?: string;
-    /**
-     * Element to display in the expandable area
-     */
-    expandableContent?: React.ReactNode;
-    /**
-     * Image source for the image card
-     */
-    src?: string;
-    /**
-     * Card title
-     */
-    title?: string;
-}
-export declare const Card: React.FC<CardProps>;

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

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

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

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

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

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-export interface CheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
-    /**
-     * Specify whether the checkbox should be disabled
-     */
-    disabled?: boolean;
-    /**
-     * Specify whether the checkbox should be checked
-     */
-    checked?: boolean;
-    /**
-     * Set the checkbox description
-     */
-    description?: string;
-}
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

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

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

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

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

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

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

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import ReactDayPicker from 'react-day-picker';
-import { IDatePickerProps } from './types';
-export declare const DatePicker: React.ForwardRefExoticComponent<IDatePickerProps & React.RefAttributes<ReactDayPicker>>;

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

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

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

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { IDatePickerProps } from './types';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IDatePickerProps & React.RefAttributes<import("react-day-picker").default>>;
-export default _default;
-export declare const DatePicker: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDatePickerProps>;
-export declare const DatePickerWithDatesBetweenTwoMonths: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDatePickerProps>;
-export declare const DatePickerWithCustomFirstDayOfWeek: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDatePickerProps>;

package/dist/components/DatePicker/DatePickerNavbar.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { IDatePickerNavbarProps } from './types';
-declare const DatePickerNavbar: React.FC<IDatePickerNavbarProps>;
-export default DatePickerNavbar;

package/dist/components/DatePicker/DatePickerRangeCalendarsWrapper.d.ts

@@ -1,2 +0,0 @@
-import * as React from 'react';
-export declare const DatePickerRangeCalendarsWrapper: React.FC<React.HTMLAttributes<HTMLDivElement>>;

package/dist/components/DatePicker/RangeDatePicker.d.ts

@@ -1,16 +0,0 @@
-import { ReactElement } from 'react';
-import { IRangeDatePickerProps } from './types';
-export declare const RangeDatePicker: {
-    ({ options, initialSelectedItemKey, initialFromDate, initialToDate, toMonth, onChange, children, }: IRangeDatePickerProps): ReactElement;
-    defaultProps: {
-        options: {
-            id: string;
-            label: string;
-            isManual: boolean;
-            value: {
-                from: undefined;
-                to: undefined;
-            };
-        }[];
-    };
-};

package/dist/components/DatePicker/RangeDatePicker.spec.d.ts

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