@livechat/design-system-react-components 2.2.2 → 2.3.0

package/dist/components/AppFrame/components/SideNavigationItem/types.d.ts

@@ -0,0 +1,44 @@
+import { ComponentCoreProps } from '../../../../utils/types';
+import * as React from 'react';
+export interface ISideNavigationItemProps extends ComponentCoreProps {
+    /**
+     * The label of the item
+     */
+    label: React.ReactNode;
+    /**
+     * Custom element on the right side of the side navigation item
+     */
+    rightNode?: React.ReactNode;
+    /**
+     * Custom element on the left side of the side navigation item
+     */
+    leftNode?: React.ReactNode;
+    /**
+     * Specify whether the icon space should be kept
+     */
+    shouldKeepIconSpace?: boolean;
+    /**
+     * The URL to navigate to
+     */
+    url?: string;
+    /**
+     * Specify whether the item is active
+     */
+    isActive?: boolean;
+    /**
+     * Specify whether the item is seen as the main one
+     */
+    isMainEntry?: boolean;
+    /**
+     * The function to call on click
+     */
+    onClick: () => void;
+    /**
+     * The function to call on item hover
+     */
+    onItemHover?: () => void;
+    /**
+     * Specify whether the icon should be hidden
+     */
+    isIconHidden?: boolean;
+}

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

@@ -0,0 +1,10 @@
+export { SideNavigation } from './SideNavigation/SideNavigation';
+export { SideNavigationGroup } from './SideNavigationGroup/SideNavigationGroup';
+export { SideNavigationItem } from './SideNavigationItem/SideNavigationItem';
+export { NavigationGroup } from './NavigationGroup/NavigationGroup';
+export { NavigationItem } from './NavigationItem/NavigationItem';
+export { Navigation } from './Navigation/Navigation';
+export { NavigationTopBar, NavigationTopBarAlert, NavigationTopBarTitle, } from './NavigationTopBar/NavigationTopBar';
+export { SIDE_NAVIGATION_ITEM_TEST_ID, SIDE_NAVIGATION_ACTIVE_ITEM_TEST_ID, SIDE_NAVIGATION_PARENT_ICON_TEST_ID, } from './SideNavigationItem/constants';
+export { ExpirationCounter } from './ExpirationCounter/ExpirationCounter';
+export { MobileNavigation } from './MobileNavigation/MobileNavigation';

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

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

package/dist/components/AppFrame/stories-helpers.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface ExampleAppContentProps {
+    showToggle: boolean;
+    alerts?: boolean[];
+    setAlerts?: (alerts: boolean[]) => void;
+    topBarVisible: boolean;
+    setTopBarVisible: (visible: boolean) => void;
+}
+export declare const ExampleAppContent: React.FC<ExampleAppContentProps>;
+export declare const ExampleTopBar: React.FC<{
+    visibleAlerts: boolean[];
+    topBarVisible: boolean;
+    setAlerts: (alerts: boolean[]) => void;
+}>;
+export declare const getBadgeContent: (item: string) => "dot" | "alert" | 5 | undefined;
+export declare const getChatsMenu: (activeSubItem: number, handler: (o: number) => void) => import("react/jsx-runtime").JSX.Element;
+export declare const getEngageSubMenu: (activeSubItem: number, handler: (o: number) => void) => import("react/jsx-runtime").JSX.Element;
+export declare const getArchivesSubMenu: (activeSubItem: number, handler: (o: number) => void) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,47 @@
+import { ComponentCoreProps } from '../../utils/types';
+import * as React from 'react';
+export interface IAppFrameProps extends ComponentCoreProps {
+    /**
+     * It will display your app in the content area
+     */
+    children: React.ReactNode;
+    /**
+     * It will display navigation elements
+     */
+    navigation: React.ReactNode;
+    /**
+     * It will display mobile navigation elements
+     */
+    mobileNavigation: React.ReactNode;
+    /**
+     * It will display the side navigation bar
+     */
+    sideNavigation?: React.ReactNode;
+    /**
+     * It will display the top bar with passed element
+     */
+    topBar?: React.ReactNode;
+    /**
+     * The CSS class for the top bar
+     */
+    topBarClassName?: string;
+    /**
+     * The CSS class for the sub navigation bar
+     */
+    sideNavigationContainerClassName?: string;
+    /**
+     * The CSS class for the content container
+     */
+    contentClassName?: string;
+    /**
+     * The value that will determine on which resolution mobile view will be displayed
+     * @default 705
+     */
+    mobileViewBreakpoint?: number;
+}
+export type { INavigationProps } from './components/Navigation/types';
+export type { INavigationGroupProps } from './components/NavigationGroup/types';
+export type { INavigationItemProps } from './components/NavigationItem/types';
+export type { ISideNavigationProps } from './components/SideNavigation/types';
+export type { ISideNavigationGroupProps } from './components/SideNavigationGroup/types';
+export type { ISideNavigationItemProps } from './components/SideNavigationItem/types';

package/dist/components/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,13 @@
+import { AutoCompleteProps } from './types';
+import * as React from 'react';
+/**
+ * Text input with autocomplete functionality. The autocomplete list is displayed below the input and is accessible via the keyboard
+ * and mouse. The list is filtered based on the input value.
+ *
+ * @example
+ * <AutoComplete
+ *  options={['Paul', 'Adam', 'John']}
+ *  placeholder="Type a name"
+ * />
+ */
+export declare const AutoComplete: React.ForwardRefExoticComponent<AutoCompleteProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,7 @@
+import { IPickerListItem } from '../Picker';
+import { AutoCompleteProps, IAutoCompleteListItem } from './types';
+
+export declare const areAllOptionsStrings: (options: AutoCompleteProps['options']) => options is string[];
+export declare const buildOptionsFromStrings: (options: string[]) => IPickerListItem[];
+export declare const buildOptionsFromAutoCompleteListItems: (options: IAutoCompleteListItem[]) => IPickerListItem[];
+export declare const getFilteredPickerItems: (items: IPickerListItem[], single: boolean, hideIfExactMatch: boolean, inputValue: string) => IPickerListItem[];

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

@@ -0,0 +1,5 @@
+import { AutoComplete } from './AutoComplete';
+import { AutoCompleteProps } from './types';
+
+export { AutoComplete };
+export type { AutoCompleteProps };

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

@@ -0,0 +1,27 @@
+import { Placement, Strategy } from '@floating-ui/react';
+import { InputProps } from '../Input';
+import { IPickerListItem } from '../Picker';
+import * as React from 'react';
+export type IAutoCompleteListItem = Omit<IPickerListItem, 'key' | 'customElement'> & {
+    customElement?: React.ReactElement;
+};
+export interface AutoCompleteProps extends Omit<InputProps, 'type'> {
+    /** Options that will be displayed in the picker. If they are strings, they will be converted to `IPickerListItem[]`*/
+    options?: string[] | IAutoCompleteListItem[];
+    /** If true, disables filtering of the options. Useful for getting options from an external source.*/
+    alwaysShowAllOptions?: boolean;
+    /** If true, the autocomplete list will be open when the component mounts.*/
+    autocompleteOpenOnInit?: boolean;
+    /** Minimum height of the list */
+    minListHeight?: number;
+    /** Maximum height of the list */
+    maxListHeight?: number;
+    /** Placement of the list */
+    placement?: Placement;
+    /** Floating strategy */
+    floatingStrategy?: Strategy;
+    /** Type of the input. If true, only shows one matching item. */
+    single?: boolean;
+    /** If true, the option list will be hidden if there is only one option and it is an exact match to the input value. */
+    hideIfExactMatch?: boolean;
+}

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

@@ -0,0 +1,42 @@
+import { ComponentCoreProps } from '../../utils/types';
+import { AvatarShape, AvatarSize, AvatarStatus, AvatarType } from './types';
+import * as React from 'react';
+export interface AvatarProps extends ComponentCoreProps {
+    /**
+     * Alternate text for an image avatar
+     */
+    alt?: 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/components/Avatar/Avatar.helpers.d.ts

@@ -0,0 +1,3 @@
+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/index.d.ts

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

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

@@ -0,0 +1,8 @@
+export declare const AvatarSizes: readonly ["xxxsmall", "xxsmall", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", "xxxlarge"];
+export declare const AvatarStatuses: readonly ["available", "unavailable", "unknown"];
+export declare const AvatarTypes: readonly ["image", "text"];
+export declare const AvatarShapes: readonly ["circle", "rounded-square"];
+export type AvatarSize = (typeof AvatarSizes)[number];
+export type AvatarStatus = (typeof AvatarStatuses)[number];
+export type AvatarType = (typeof AvatarTypes)[number];
+export type AvatarShape = (typeof AvatarShapes)[number];

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

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

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

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

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

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

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

@@ -0,0 +1,70 @@
+import { ButtonKind, ButtonSize } from './types';
+import * as React from 'react';
+export type ButtonProps = {
+    /**
+     * Specify the button kind
+     */
+    kind?: ButtonKind;
+    /**
+     * Specify the button size
+     */
+    size?: ButtonSize;
+    /**
+     * 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';
+    /**
+     * Set to enable animation that will show label on button hover if icon is present
+     */
+    animatedLabel?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare const Button: React.ForwardRefExoticComponent<{
+    /**
+     * Specify the button kind
+     */
+    kind?: ButtonKind | undefined;
+    /**
+     * Specify the button size
+     */
+    size?: ButtonSize | 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?: "left" | "right" | undefined;
+    /**
+     * Set to enable animation that will show label on button hover if icon is present
+     */
+    animatedLabel?: boolean | undefined;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;

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

@@ -0,0 +1,6 @@
+import { ButtonKind } from './types';
+import * as React from 'react';
+export declare const getSpinnerColors: (kind: ButtonKind) => Record<string, string> | undefined;
+export declare const handleMouseInteraction: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>, internalHandler: () => void, userHandler?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>) => void;
+export declare const handleKeyboardInteraction: (event: React.FocusEvent<HTMLButtonElement> | React.FocusEvent<HTMLAnchorElement>, internalHandler: () => void, userHandler?: React.FocusEventHandler<HTMLButtonElement | HTMLAnchorElement>) => void;
+export declare const buttonRef: (node: HTMLSpanElement | null, internalHandler: (width: number) => void) => void;

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

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

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

@@ -0,0 +1,2 @@
+export type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'destructive-outline' | 'text' | 'link' | 'link-light' | 'link-inverted' | 'plain' | 'float' | 'dotted' | 'high-contrast' | 'plain-lock-black' | 'text-lock-black';
+export type ButtonSize = 'xcompact' | 'compact' | 'medium' | 'large';

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

@@ -0,0 +1,30 @@
+import { ButtonProps } from '../Button';
+import * as React from 'react';
+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<React.PropsWithChildren<CardProps>>;

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

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

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

@@ -0,0 +1,16 @@
+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/index.d.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+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/helpers.d.ts

@@ -0,0 +1,17 @@
+import { Modifiers } from 'react-day-picker';
+import { ClassNames } from 'react-day-picker/types/ClassNames';
+import { IRangeDatePickerProps, IRangeDatePickerState, IRangeDatePickerOption } from './types';
+
+export declare const isDateWithinRange: (date: Date, range: {
+    from?: Date;
+    to?: Date;
+}) => boolean;
+export declare const calculateDatePickerMonth: (initialFromDate?: Date, initialToDate?: Date, toMonth?: Date) => Date;
+export declare const getRangeDatePickerModifiers: (from?: Date, to?: Date) => Partial<Modifiers>;
+export declare const getSelectedOption: (itemId: string | null, options: IRangeDatePickerOption[]) => IRangeDatePickerOption | undefined;
+export declare const isSelectingFirstDay: (from?: Date, to?: Date) => boolean;
+export declare const getInitialStateFromProps: (props: IRangeDatePickerProps) => Partial<IRangeDatePickerState>;
+export declare const getDatePickerClassNames: (range?: boolean, classNames?: ClassNames) => ClassNames & {
+    start: string;
+    end: string;
+};

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

@@ -0,0 +1,7 @@
+import { Dispatch, ReducerAction, ReducerState } from 'react';
+import { IRangeDatePickerProps, RangeDatePickerReducer } from './types';
+
+export declare const useRangeDatePickerState: (props: IRangeDatePickerProps) => [
+    ReducerState<RangeDatePickerReducer>,
+    Dispatch<ReducerAction<RangeDatePickerReducer>>
+];

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

@@ -0,0 +1,3 @@
+export { DatePicker } from './DatePicker';
+export { RangeDatePicker } from './RangeDatePicker';
+export { DatePickerRangeCalendarsWrapper } from './DatePickerRangeCalendarsWrapper';

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

@@ -0,0 +1,101 @@
+import { Reducer, Ref, ReactElement } from 'react';
+import { default as ReactDayPicker, DayPickerProps } from 'react-day-picker';
+import { ClassNames } from 'react-day-picker/types/ClassNames';
+
+export interface IDatePickerProps extends Omit<DayPickerProps, 'todayButton' | 'showWeekNumbers'> {
+    innerRef?: Ref<ReactDayPicker>;
+    range?: boolean;
+}
+export interface IDatePickerNavbarProps {
+    showPreviousButton?: boolean;
+    showNextButton?: boolean;
+    month: Date;
+    fromMonth?: Date;
+    toMonth?: Date;
+    numberOfMonths?: number;
+    className?: string;
+    classNames: ClassNames;
+    onPreviousClick?: () => void;
+    onNextClick?: () => void;
+    onMonthChange: (newMonth: Date) => void;
+}
+export declare enum RangeDatePickerAction {
+    NEW_SELECTED_ITEM = "NEW_SELECTED_ITEM",
+    NEW_TEMPORARY_TO_VALUE = "NEW_TEMPORARY_TO_VALUE",
+    CLEAR = "CLEAR",
+    SET_FROM = "SET_FROM",
+    SET_TO = "SET_TO",
+    SELECT_FIRST_DAY = "SELECT_FIRST_DAY",
+    SELECT_SECOND_DAY_AS_FROM = "SELECT_SECOND_DAY_AS_FROM",
+    SELECT_SECOND_DAY_AS_TO = "SELECT_SECOND_DAY_AS_TO",
+    CURRENT_MONTH_CHANGE = "CURRENT_MONTH_CHANGE"
+}
+export type IRangeDatePickerReducerAction = {
+    type: RangeDatePickerAction.NEW_SELECTED_ITEM;
+    payload: {
+        selectedItem: string | null;
+    };
+} | {
+    type: RangeDatePickerAction.NEW_TEMPORARY_TO_VALUE | RangeDatePickerAction.SELECT_FIRST_DAY | RangeDatePickerAction.SELECT_SECOND_DAY_AS_FROM | RangeDatePickerAction.SELECT_SECOND_DAY_AS_TO | RangeDatePickerAction.CURRENT_MONTH_CHANGE;
+    payload: {
+        date: Date;
+    };
+} | {
+    type: RangeDatePickerAction.SET_FROM | RangeDatePickerAction.SET_TO;
+    payload: {
+        date?: Date;
+    };
+};
+export interface IRangeDatePickerState {
+    selectedItem: string | null;
+    from?: Date;
+    to?: Date;
+    temporaryTo?: Date;
+    currentMonth: Date;
+}
+export type RangeDatePickerReducer = Reducer<IRangeDatePickerState, IRangeDatePickerReducerAction>;
+export interface IRangeDatePickerOption {
+    id: string;
+    label: string;
+    isManual?: boolean;
+    value: {
+        from?: Date;
+        to?: Date;
+    } | null;
+}
+interface IRangeDatePickerChildrenPayloadDatePicker {
+    modifiers?: DayPickerProps['modifiers'];
+    initialMonth?: Date;
+    month: Date;
+    range?: boolean;
+    numberOfMonths: number;
+    fromMonth?: Date;
+    toMonth?: Date;
+    selectedDays?: DayPickerProps['selectedDays'];
+    disabledDays?: DayPickerProps['disabledDays'];
+    onDayMouseEnter: DayPickerProps['onDayMouseEnter'];
+    onDayClick(day: Date): void;
+    onMonthChange(month: Date): void;
+}
+export interface IRangeDatePickerChildrenPayload {
+    select: {
+        selected: string | number;
+        onItemSelect(itemKey: string | number): void;
+    };
+    inputs: {
+        fromDate?: Date;
+        toDate?: Date;
+    };
+    datepicker: IRangeDatePickerChildrenPayloadDatePicker;
+    selectedOption?: IRangeDatePickerOption;
+}
+export interface IRangeDatePickerProps {
+    options: IRangeDatePickerOption[];
+    initialSelectedItemKey?: string;
+    initialFromDate?: Date;
+    initialToDate?: Date;
+    toMonth?: Date;
+    onChange: (selected: IRangeDatePickerOption | null) => void;
+    children(payload: IRangeDatePickerChildrenPayload): ReactElement;
+}
+export {};

package/dist/components/DetailsCard/DetailsCard.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+export interface IDetailsCardProps {
+    /**
+     * The CSS class for card container
+     */
+    className?: string;
+    /**
+     * Additional element for the label on the left
+     */
+    leftNode?: React.ReactNode;
+    /**
+     * Additional element for the label on the right
+     */
+    rightNode?: React.ReactNode;
+    /**
+     * Set the label
+     */
+    label: React.ReactNode;
+    /**
+     * Define if divider should be visible
+     */
+    withDivider?: boolean;
+    /**
+     * Removes the spacing inside the main container
+     */
+    fullSpaceContent?: boolean;
+    /**
+     * Set if card should be open by default
+     */
+    openOnInit?: boolean;
+    /**
+     * Set to hide the label on card open
+     */
+    hideLabelOnOpen?: boolean;
+    /**
+     * Callback function called when the card label is clicked
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLDivElement>) => void;
+}
+export declare const DetailsCard: React.FC<React.PropsWithChildren<IDetailsCardProps>>;

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

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

package/dist/components/DetailsCardInfo/DetailsCardInfo.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface IDetailsCardInfoProps {
+    /**
+     * Set the label
+     */
+    label: string;
+}
+export declare const DetailsCardInfo: React.FC<React.PropsWithChildren<IDetailsCardInfoProps>>;

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

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