@livechat/design-system-react-components 1.0.0-alpha.52 → 1.0.0-alpha.54

package/dist/shadow/spacing.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/foundations/spacing.css"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"spacing.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/foundations/spacing.css"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"spacing.css"}

package/dist/spacing/spacing.css

@@ -9,6 +9,7 @@
   --spacing-6: 24px;
   --spacing-8: 32px;
   --spacing-12: 48px;
+  --spacing-14: 56px;
   --spacing-16: 64px;
   --spacing-18: 72px;
   --spacing-20: 80px;

package/dist/spacing/spacing.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/foundations/spacing.css"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"spacing.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/foundations/spacing.css"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"spacing.css"}

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

@@ -1,8 +1,31 @@
 import * as React from 'react';
 declare 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>>;

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

@@ -4,15 +4,45 @@ declare type AvatarSize = 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium'
 declare type AvatarStatus = 'available' | 'unavailable' | 'unknown';
 declare 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>;

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

@@ -1,9 +1,24 @@
 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/src/components/Button/Button.d.ts

@@ -1,21 +1,63 @@
 import * as React from 'react';
 import { Size } from 'utils';
-export declare type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'text' | 'plain' | 'plain-light' | 'subtle';
+export declare type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'text' | 'plain' | 'plain-light' | 'subtle' | 'float' | 'dotted';
 export declare 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/src/components/Card/Card.d.ts

@@ -2,11 +2,29 @@ import * as React from 'react';
 import { ButtonProps } from '../Button';
 export declare 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/src/components/Picker/Picker.d.ts

@@ -4,20 +4,69 @@ import { IconSize } from '../Icon';
 import { Size } from 'utils';
 export declare type PickerType = 'single' | 'multi';
 export interface IPickerProps {
+    /**
+     * Specify the custom id
+     */
     id?: string;
+    /**
+     * The CSS class for picker container
+     */
     className?: string;
+    /**
+     * Specify whether the picker should be disabled
+     */
     disabled?: boolean;
+    /**
+     * Specify whether the picker should be in error state
+     */
     error?: boolean;
+    /**
+     * Array of picker options
+     */
     options: IPickerListItem[];
+    /**
+     * Array of picker selected options
+     */
     selected?: IPickerListItem[] | null;
+    /**
+     * Specify the picker size
+     */
     size?: Size;
+    /**
+     * Set the dismiss icon size in tags when `multi` type is enabled
+     */
     tagIconSize?: IconSize;
+    /**
+     * Specify the placeholder for search input
+     */
     placeholder?: string;
+    /**
+     * Specify whether the option select is required
+     */
     isRequired?: boolean;
+    /**
+     * Text if no search result were found
+     */
     noSearchResultText?: string;
+    /**
+     * Text for `select all` option which will be visible if defined in multi select mode
+     */
     selectAllOptionText?: string;
+    /**
+     * Set `multi` to specify whether the picker should allow to multi selection
+     */
     type?: PickerType;
+    /**
+     * Set to disable search input
+     */
     searchDisabled?: boolean;
+    /**
+     * Set to hide clear selection button
+     */
+    hideClearButton?: boolean;
+    /**
+     * Callback called after item selection
+     */
     onSelect: (selectedItems: IPickerListItem[] | null) => void;
 }
 export declare const Picker: React.FC<IPickerProps>;

package/dist/src/components/Picker/Trigger.d.ts

@@ -9,6 +9,7 @@ export interface ITriggerProps {
     isRequired?: boolean;
     isMultiSelect?: boolean;
     size?: Size;
+    hideClearButton?: boolean;
     onTrigger: (e: React.MouseEvent | KeyboardEvent) => void;
     onClear: () => void;
 }

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

@@ -2,11 +2,33 @@ 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/src/foundations/spacing-token.d.ts

@@ -9,6 +9,7 @@ export declare const SpacingToken: {
     Spacing6: string;
     Spacing8: string;
     Spacing12: string;
+    Spacing14: string;
     Spacing16: string;
     Spacing18: string;
     Spacing20: string;