@livechat/design-system-react-components 1.0.0-alpha.53 → 1.0.0-alpha.55

package/dist/shadow/color-scheme.css

@@ -0,0 +1,14 @@
+:root,
+.lc-legacy-theme {
+  --color-scheme: normal;
+}
+
+.lc-light-theme {
+  --color-scheme: normal;
+}
+
+.lc-dark-theme {
+  --color-scheme: dark;
+}
+
+/*# sourceMappingURL=color-scheme.css.map */

package/dist/shadow/color-scheme.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/foundations/color-scheme.css"],"names":[],"mappings":"AAAA;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE","file":"color-scheme.css"}

package/dist/shadow/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/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/color-scheme.css

@@ -0,0 +1,14 @@
+:root,
+.lc-legacy-theme {
+  --color-scheme: normal;
+}
+
+.lc-light-theme {
+  --color-scheme: normal;
+}
+
+.lc-dark-theme {
+  --color-scheme: dark;
+}
+
+/*# sourceMappingURL=color-scheme.css.map */

package/dist/spacing/color-scheme.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/foundations/color-scheme.css"],"names":[],"mappings":"AAAA;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE","file":"color-scheme.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

@@ -9,6 +9,20 @@ export interface AlertProps {
      * 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
      */

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from 'utils';
-export declare type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'text' | 'plain' | 'plain-light' | 'subtle' | 'float';
+export declare type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'text' | 'plain' | 'plain-light' | 'subtle' | 'float' | 'dotted';
 export declare type ButtonProps = {
     /**
      * Specify the button kind

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/Input/Input.d.ts

@@ -1,13 +1,24 @@
 import * as React from 'react';
-import { Size } from 'utils/constants';
 interface InputIcon {
     source: React.ReactElement;
     place: 'left' | 'right';
 }
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    inputSize?: Size;
+    /**
+     * Specify the input size
+     */
+    inputSize?: 'xsmall' | 'compact' | 'medium' | 'large';
+    /**
+     * Specify whether the input should be in error state
+     */
     error?: boolean;
+    /**
+     * Specify whether the input should be disabled
+     */
     disabled?: boolean;
+    /**
+     * Set the icon and its position
+     */
     icon?: InputIcon;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -64,6 +64,14 @@ export interface IPickerProps {
      * Set to hide clear selection button
      */
     hideClearButton?: boolean;
+    /**
+     * Will open picker on component initialization
+     */
+    openedOnInit?: boolean;
+    /**
+     * Test id passed to the picker trigger element
+     */
+    ['data-testid']?: string;
     /**
      * Callback called after item selection
      */

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

@@ -12,5 +12,6 @@ export interface ITriggerProps {
     hideClearButton?: boolean;
     onTrigger: (e: React.MouseEvent | KeyboardEvent) => void;
     onClear: () => void;
+    testId?: string;
 }
 export declare const Trigger: React.FC<React.PropsWithChildren<ITriggerProps>>;

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

@@ -1,13 +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/src/components/Search/Search.d.ts

@@ -1,12 +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/src/components/SegmentedControl/SegmentedControl.d.ts

@@ -6,12 +6,33 @@ declare type ButtonElement = {
     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>;

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

@@ -1,14 +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/src/components/TagInput/TagInput.d.ts

@@ -1,13 +1,32 @@
 import * as React from 'react';
-declare type Tags = string[];
 export interface TagInputProps {
+    /**
+     * Set the id for input
+     */
     id?: string;
+    /**
+     * Set the error message
+     */
     error?: string;
-    tags?: Tags;
-    onChange: (tags: Tags) => void;
+    /**
+     * 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>;
-export {};

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;