@livechat/design-system-react-components 2.22.1 → 2.24.0

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

@@ -1 +1,2 @@
 export { Accordion, AccordionPromo } from './Accordion';
+export * from './components';

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 export type ButtonProps = {
     /**
      * Specify the button kind
+     * @note The 'basic' kind is deprecated and will be removed in a future release. Please use 'secondary' instead.
      */
     kind?: ButtonKind;
     /**
@@ -37,6 +38,7 @@ export type ButtonProps = {
 export declare const Button: React.ForwardRefExoticComponent<{
     /**
      * Specify the button kind
+     * @note The 'basic' kind is deprecated and will be removed in a future release. Please use 'secondary' instead.
      */
     kind?: ButtonKind;
     /**

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 export type ButtonSize = 'compact' | 'medium' | 'large';
 type ButtonElement = {
     id: string;
-    label: string;
+    label?: string;
 } & Pick<ButtonProps, 'disabled' | 'loading' | 'icon'>;
 export interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
     /**

package/dist/components/Table/TableHeader.d.ts

@@ -13,6 +13,9 @@ interface TableHeaderProps<T> {
     selectable?: boolean;
     hoveredColumnIndex: number | null;
     setHoveredColumnIndex: (index: number | null) => void;
+    selectedCount?: number;
+    dataLength?: number;
+    toggleSelectAll?: () => void;
 }
-export declare const TableHeader: <T>({ columns, sortConfig, handleSort, resizable, handleMouseDown, columnRefs, selectable, hoveredColumnIndex, setHoveredColumnIndex, }: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableHeader: <T>({ columns, sortConfig, handleSort, resizable, handleMouseDown, columnRefs, selectable, hoveredColumnIndex, setHoveredColumnIndex, selectedCount, dataLength, toggleSelectAll, }: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,10 +1,15 @@
 import * as React from 'react';
-export type Column<T> = {
+export type BaseColumn<T> = {
     key: keyof T;
     header: string;
     sortable?: boolean;
-    sortValue?: (item: T) => string | number;
 };
+export type Column<T> = BaseColumn<T> & ({
+    sortable?: false;
+} | {
+    sortable: true;
+    sortValue: (row: T) => string | number;
+});
 export type TableSize = 'small' | 'medium' | 'large';
 export type PinOptions = 'header' | 'leftColumn';
 export type StrippedOptions = 'rows' | 'columns';
@@ -13,7 +18,7 @@ export declare enum SortOrder {
     Descending = "desc",
     None = "none"
 }
-export interface ITableProps<T> {
+type BaseTableProps<T> = {
     /**
      * The data to be displayed in the table. Each item represents a row.
      */
@@ -21,7 +26,7 @@ export interface ITableProps<T> {
     /**
      * The configuration for table columns, including keys, headers, and optional sorting logic.
      */
-    columns: Column<T>[];
+    columns: Array<Column<T>>;
     /**
      * The parameter allows you to customize alternating background colors for rows
      * or columns in the table, enhancing readability and visual separation. Allowed values
@@ -48,35 +53,45 @@ export interface ITableProps<T> {
      * Enables or disables the ability to resize columns by dragging the edges of headers.
      */
     resizable?: boolean;
+    /**
+     * Sets the `data-testid` attribute, allowing the table to be easily selected in automated tests.
+     */
+    testId?: string;
+};
+type NonSelectableTableProps<T> = BaseTableProps<T> & {
+    selectable?: false;
+    selectedRows?: never;
+    onSelectionChange?: never;
+    rowSelectionMessage?: never;
+    rowActions?: never;
+};
+type SelectableTableProps<T> = BaseTableProps<T> & {
     /**
      * Enables row selection mode, adding checkboxes to each row and the header for selection.
      */
-    selectable?: true;
+    selectable: true;
     /**
      * A set of currently selected row IDs. Useful for controlling the selection state externally.
      */
-    selectedRows?: Set<string | number>;
+    selectedRows: Set<string | number>;
     /**
      * A callback function triggered when the selected rows change.
      * @param selectedIds - A set of selected row IDs.
      */
-    onSelectionChange?: (selectedIds: Set<string | number>) => void;
+    onSelectionChange: (selectedIds: Set<string | number>) => void;
     /**
      * Defines a customizable message to display the count of selected rows in the table. By default,
      * the message appears as "{count} selected items".
      */
-    rowSelectionMessage?: string | React.ReactNode;
+    rowSelectionMessage?: React.ReactNode;
     /**
      * Allows you to define a custom action bar that appears when rows are selected. The action bar
      * can contain buttons or other UI elements for performing bulk operations on the selected rows,
      * such as "Delete All" or "Export."
      */
     rowActions?: React.ReactNode;
-    /**
-     * Sets the `data-testid` attribute, allowing the table to be easily selected in automated tests.
-     */
-    testId?: string;
-}
+};
+export type ITableProps<T> = NonSelectableTableProps<T> | SelectableTableProps<T>;
 export interface SortConfig<T> {
     key: keyof T | null;
     direction: SortOrder;
@@ -100,3 +115,4 @@ export interface DataForPinningExample {
     income: string;
     controls: React.ReactNode;
 }
+export {};

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

@@ -174,7 +174,28 @@ export interface ITooltipInfoProps {
      */
     handleCloseAction?: (ev: React.MouseEvent) => void;
 }
-export interface ITooltipInteractiveProps {
+type TooltipMediaImage = {
+    /**
+     * The Interactive tooltip image
+     */
+    image: {
+        src: string;
+        alt: string;
+    };
+    video?: never;
+};
+type TooltipMediaVideo = {
+    /**
+     * The Interactive tooltip video. Renders with autoplay, loop, and muted by default
+     */
+    video: string;
+    image?: never;
+};
+type TooltipMedia = TooltipMediaImage | TooltipMediaVideo | {
+    image?: never;
+    video?: never;
+};
+export type ITooltipInteractiveProps = {
     /**
      * The Interactive tooltip header
      */
@@ -183,13 +204,6 @@ export interface ITooltipInteractiveProps {
      * The Interactive tooltip text
      */
     text: string;
-    /**
-     * The Interactive tooltip image
-     */
-    image?: {
-        src: string;
-        alt: string;
-    };
     /**
      * Set to show close button
      * @deprecated Use `handleCloseAction` instead
@@ -211,4 +225,5 @@ export interface ITooltipInteractiveProps {
      * The Interactive tooltip secondary button props
      */
     secondaryButton?: TooltipButton | React.ReactNode;
-}
+} & TooltipMedia;
+export {};

package/dist/foundations/design-token.d.ts

@@ -388,5 +388,162 @@ export declare const DesignToken: {
     ContentAiCopilotBasic: string;
     ContentAiCopilotInvert: string;
     ContentAiOther1Default: string;
+    CategoricalMain1: string;
+    CategoricalMain2: string;
+    CategoricalMain3: string;
+    CategoricalMain4: string;
+    CategoricalMain5: string;
+    CategoricalMain6: string;
+    CategoricalMain7: string;
+    CategoricalMain8: string;
+    CategoricalMain9: string;
+    CategoricalMain10: string;
+    CategoricalMain11: string;
+    CategoricalMain12: string;
+    CategoricalMain13: string;
+    CategoricalMain14: string;
+    SequentialBlue25: string;
+    SequentialBlue50: string;
+    SequentialBlue100: string;
+    SequentialBlue200: string;
+    SequentialBlue300: string;
+    SequentialBlue400: string;
+    SequentialBlue500: string;
+    SequentialBlue600: string;
+    SequentialBlue700: string;
+    SequentialBlue800: string;
+    SequentialBlue900: string;
+    SequentialBlue950: string;
+    SequentialYellow25: string;
+    SequentialYellow50: string;
+    SequentialYellow100: string;
+    SequentialYellow200: string;
+    SequentialYellow300: string;
+    SequentialYellow400: string;
+    SequentialYellow500: string;
+    SequentialYellow600: string;
+    SequentialYellow700: string;
+    SequentialYellow800: string;
+    SequentialYellow900: string;
+    SequentialYellow950: string;
+    SequentialGreen25: string;
+    SequentialGreen50: string;
+    SequentialGreen100: string;
+    SequentialGreen200: string;
+    SequentialGreen300: string;
+    SequentialGreen400: string;
+    SequentialGreen500: string;
+    SequentialGreen600: string;
+    SequentialGreen700: string;
+    SequentialGreen800: string;
+    SequentialGreen900: string;
+    SequentialGreen950: string;
+    SequentialMagenta25: string;
+    SequentialMagenta50: string;
+    SequentialMagenta100: string;
+    SequentialMagenta200: string;
+    SequentialMagenta300: string;
+    SequentialMagenta400: string;
+    SequentialMagenta500: string;
+    SequentialMagenta600: string;
+    SequentialMagenta700: string;
+    SequentialMagenta800: string;
+    SequentialMagenta900: string;
+    SequentialMagenta950: string;
+    SequentialOrange25: string;
+    SequentialOrange50: string;
+    SequentialOrange100: string;
+    SequentialOrange200: string;
+    SequentialOrange300: string;
+    SequentialOrange400: string;
+    SequentialOrange500: string;
+    SequentialOrange600: string;
+    SequentialOrange700: string;
+    SequentialOrange800: string;
+    SequentialOrange900: string;
+    SequentialOrange950: string;
+    SequentialPurple25: string;
+    SequentialPurple50: string;
+    SequentialPurple100: string;
+    SequentialPurple200: string;
+    SequentialPurple300: string;
+    SequentialPurple400: string;
+    SequentialPurple500: string;
+    SequentialPurple600: string;
+    SequentialPurple700: string;
+    SequentialPurple800: string;
+    SequentialPurple900: string;
+    SequentialPurple950: string;
+    SequentialRed25: string;
+    SequentialRed50: string;
+    SequentialRed100: string;
+    SequentialRed200: string;
+    SequentialRed300: string;
+    SequentialRed400: string;
+    SequentialRed500: string;
+    SequentialRed600: string;
+    SequentialRed700: string;
+    SequentialRed800: string;
+    SequentialRed900: string;
+    SequentialRed950: string;
+    Categorical1colorColor1: string;
+    Categorical1colorColor2: string;
+    Categorical1colorColor3: string;
+    Categorical1colorColor4: string;
+    Categorical2colorsOption1Color1: string;
+    Categorical2colorsOption1Color2: string;
+    Categorical2colorsOption2Color1: string;
+    Categorical2colorsOption2Color2: string;
+    Categorical2colorsOption3Color1: string;
+    Categorical2colorsOption3Color2: string;
+    Categorical2colorsOption4Color1: string;
+    Categorical2colorsOption4Color2: string;
+    Categorical2colorsOption5Color1: string;
+    Categorical2colorsOption5Color2: string;
+    Categorical2colorsOption6Color1: string;
+    Categorical2colorsOption6Color2: string;
+    Categorical3colorsOption1Color1: string;
+    Categorical3colorsOption1Color2: string;
+    Categorical3colorsOption1Color3: string;
+    Categorical3colorsOption2Color1: string;
+    Categorical3colorsOption2Color2: string;
+    Categorical3colorsOption2Color3: string;
+    Categorical3colorsOption3Color1: string;
+    Categorical3colorsOption3Color2: string;
+    Categorical3colorsOption3Color3: string;
+    Categorical3colorsOption4Color1: string;
+    Categorical3colorsOption4Color2: string;
+    Categorical3colorsOption4Color3: string;
+    Categorical3colorsOption5Color1: string;
+    Categorical3colorsOption5Color2: string;
+    Categorical3colorsOption5Color3: string;
+    Categorical3colorsOption6Color1: string;
+    Categorical3colorsOption6Color2: string;
+    Categorical3colorsOption6Color3: string;
+    Categorical4colorsOption1Color1: string;
+    Categorical4colorsOption1Color2: string;
+    Categorical4colorsOption1Color3: string;
+    Categorical4colorsOption1Color4: string;
+    Categorical4colorsOption2Color1: string;
+    Categorical4colorsOption2Color2: string;
+    Categorical4colorsOption2Color3: string;
+    Categorical4colorsOption2Color4: string;
+    Categorical4colorsOption3Color1: string;
+    Categorical4colorsOption3Color2: string;
+    Categorical4colorsOption3Color3: string;
+    Categorical4colorsOption3Color4: string;
+    Categorical5colorsOption1Color1: string;
+    Categorical5colorsOption1Color2: string;
+    Categorical5colorsOption1Color3: string;
+    Categorical5colorsOption1Color4: string;
+    Categorical5colorsOption1Color5: string;
+    Categorical5colorsOption2Color1: string;
+    Categorical5colorsOption2Color2: string;
+    Categorical5colorsOption2Color3: string;
+    Categorical5colorsOption2Color4: string;
+    Categorical5colorsOption2Color5: string;
+    UifoundationSurfaceDefault: string;
+    UifoundationBorderGrid: string;
+    UifoundationBorderAxis: string;
 };
 export type DesignTokenKey = keyof typeof DesignToken;

package/dist/foundations/radius-token.d.ts

@@ -4,6 +4,7 @@ export declare const RadiusToken: {
     Radius2: string;
     Radius3: string;
     Radius4: string;
+    UiFoundationRadiusBar: string;
     0: string;
     1: string;
     2: string;