@getsoren/design-system 4.39.3

package/dist/src/components/DataDisplay/Chat/Chat.d.ts

@@ -0,0 +1,25 @@
+import { FC, ReactNode } from 'react';
+import { default as ChatConversationDetail } from './components/ChatConversationDetail';
+import { default as ChatConversationList } from './components/ChatConversationList';
+import { default as ChatMessageBubble } from './components/ChatMessageBubble';
+import { default as ChatMessageInput } from './components/ChatMessageInput';
+import { default as ChatParticipantDialog } from './components/ChatParticipantDialog';
+interface ChatProps {
+    children: ReactNode;
+    height?: string | number;
+    width?: string | number;
+}
+interface ChatBodyProps {
+    children: ReactNode;
+}
+declare const ChatBody: ({ children }: ChatBodyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+type ChatComponent = FC<ChatProps> & {
+    Body: typeof ChatBody;
+    ConversationDetail: typeof ChatConversationDetail;
+    ConversationList: typeof ChatConversationList;
+    MessageBubble: typeof ChatMessageBubble;
+    MessageInput: typeof ChatMessageInput;
+    ParticipantDialog: typeof ChatParticipantDialog;
+};
+declare const Chat: ChatComponent;
+export default Chat;

package/dist/src/components/DataDisplay/Chat/components/ChatConversationDetail.d.ts

@@ -0,0 +1,3 @@
+import { ChatConversationDetailProps } from '../types';
+declare const ChatConversationDetail: ({ threadId, participants, isLoading, messages, currentUserId, onDeleteConversation, onNewConversation, onSendMessage, onAddParticipants, onSearchParticipants, searchResults, isSearchingParticipants, avatarSrcResolver, renderAfterBubble, labels, formatDayLabel, isSending, formatParticipantName, headerAction, defaultMessage, onAddParticipantDialogOpenChange, messageMaxLength, }: ChatConversationDetailProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ChatConversationDetail;

package/dist/src/components/DataDisplay/Chat/components/ChatConversationDetailHeader.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { ChatConversationDetailLabels, ChatParticipant, ChatSearchUser } from '../types';
+interface ChatConversationDetailHeaderProps {
+    threadId: string;
+    participants?: ChatParticipant[] | null;
+    onDeleteConversation: (threadId: string) => void;
+    onAddParticipants: (participants: ChatSearchUser[]) => void;
+    onSearchParticipants?: (query: string) => void;
+    searchResults?: ChatSearchUser[];
+    isSearchingParticipants?: boolean;
+    avatarSrcResolver?: (src?: string | null) => string | undefined;
+    labels?: ChatConversationDetailLabels;
+    formatParticipantName?: (participant: ChatParticipant) => string;
+    headerAction?: ReactNode;
+    onAddParticipantDialogOpenChange?: (open: boolean) => void;
+}
+declare const ChatConversationDetailHeader: ({ threadId, participants, onDeleteConversation, onAddParticipants, onSearchParticipants, searchResults, isSearchingParticipants, avatarSrcResolver, labels, formatParticipantName, headerAction, onAddParticipantDialogOpenChange, }: ChatConversationDetailHeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ChatConversationDetailHeader;

package/dist/src/components/DataDisplay/Chat/components/ChatConversationList.d.ts

@@ -0,0 +1,3 @@
+import { ChatConversationListProps } from '../types';
+declare const ChatConversationList: ({ threads, isLoading, selectedThreadId, onSelectThread, onNewConversation, avatarSrcResolver, labels, formatDate, formatParticipantName, onLoadMore, hasMore, }: ChatConversationListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ChatConversationList;

package/dist/src/components/DataDisplay/Chat/components/ChatMessageBubble.d.ts

@@ -0,0 +1,3 @@
+import { ChatMessageBubbleProps } from '../types';
+declare const ChatMessageBubble: ({ isOwn, message, participants, avatarSrcResolver, renderAfterBubble, formatTime }: ChatMessageBubbleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ChatMessageBubble;

package/dist/src/components/DataDisplay/Chat/components/ChatMessageInput.d.ts

@@ -0,0 +1,3 @@
+import { ChatMessageInputProps } from '../types';
+declare const ChatMessageInput: ({ onSend, labels, autoFocusKey, isSending, defaultMessage, maxLength }: ChatMessageInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ChatMessageInput;

package/dist/src/components/DataDisplay/Chat/components/ChatParticipantAutocomplete.d.ts

@@ -0,0 +1,21 @@
+import { Ref } from 'react';
+import { ChatSearchUser } from '../types';
+export interface ChatParticipantAutocompleteHandle {
+    focus: () => void;
+}
+interface ChatParticipantAutocompleteProps {
+    ref?: Ref<ChatParticipantAutocompleteHandle>;
+    value: ChatSearchUser[];
+    onChange: (value: ChatSearchUser[]) => void;
+    onInputChange?: (query: string) => void;
+    options?: ChatSearchUser[];
+    isLoading?: boolean;
+    avatarSrcResolver?: (src?: string | null) => string | undefined;
+    labels?: {
+        participants?: string;
+        searchContacts?: string;
+        noOptionsText?: string;
+    };
+}
+declare const ChatParticipantAutocomplete: ({ ref, value, onChange, onInputChange, options, isLoading, avatarSrcResolver, labels, }: ChatParticipantAutocompleteProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ChatParticipantAutocomplete;

package/dist/src/components/DataDisplay/Chat/components/ChatParticipantDialog.d.ts

@@ -0,0 +1,3 @@
+import { ChatParticipantDialogProps } from '../types';
+declare const ChatParticipantDialog: ({ open, onClose, onConfirm, onSearch, searchResults, isSearchLoading, isConfirmLoading, avatarSrcResolver, labels, }: ChatParticipantDialogProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ChatParticipantDialog;

package/dist/src/components/DataDisplay/Chat/types.d.ts

@@ -0,0 +1,122 @@
+import { ReactNode } from 'react';
+export interface ChatMessage {
+    id: string | number;
+    authorId: string;
+    body: string;
+    createdAt: string;
+}
+export interface ChatParticipant {
+    userId: string;
+    firstName: string;
+    lastName: string;
+    avatar?: string | null;
+}
+export interface ChatThread {
+    id: string;
+    createdAt: string;
+    updatedAt?: string | null;
+    lastMessagePreview?: string | null;
+    unreadCount?: number | null;
+    participants?: ChatParticipant[] | null;
+}
+export interface ChatSearchUser {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    avatar?: string | null;
+}
+export interface ChatConversationListLabels {
+    messages?: string;
+    search?: string;
+}
+export interface ChatConversationDetailLabels {
+    today?: string;
+    yesterday?: string;
+    createYourFirstConversation?: string;
+    newConversation?: string;
+    writeAMessage?: string;
+    send?: string;
+    enterToSend?: string;
+    addParticipant?: string;
+    deleteConversation?: string;
+    participants?: string;
+    searchContacts?: string;
+    add?: string;
+}
+export interface ChatMessageInputLabels {
+    writeAMessage?: string;
+    send?: string;
+    enterToSend?: string;
+}
+export interface ChatParticipantDialogLabels {
+    title?: string;
+    confirm?: string;
+    participants?: string;
+    searchContacts?: string;
+    noOptionsText?: string;
+}
+export interface ChatConversationListProps {
+    threads?: ChatThread[];
+    isLoading?: boolean;
+    selectedThreadId?: string;
+    onSelectThread: (threadId: string) => void;
+    onNewConversation: () => void;
+    avatarSrcResolver?: (src?: string | null) => string | undefined;
+    labels?: ChatConversationListLabels;
+    formatDate?: (date: string) => string;
+    formatParticipantName?: (participant: ChatParticipant) => string;
+    onLoadMore?: () => void;
+    hasMore?: boolean;
+}
+export interface ChatConversationDetailProps {
+    threadId?: string;
+    participants?: ChatParticipant[] | null;
+    isLoading?: boolean;
+    messages?: ChatMessage[];
+    currentUserId: string;
+    onDeleteConversation: (threadId: string) => void;
+    onNewConversation: () => void;
+    onSendMessage: (threadId: string, body: string) => void;
+    onAddParticipants: (participants: ChatSearchUser[]) => void;
+    onSearchParticipants?: (query: string) => void;
+    searchResults?: ChatSearchUser[];
+    isSearchingParticipants?: boolean;
+    avatarSrcResolver?: (src?: string | null) => string | undefined;
+    renderAfterBubble?: (message: ChatMessage, urls: string[]) => ReactNode;
+    labels?: ChatConversationDetailLabels;
+    formatDayLabel?: (date: string) => string;
+    isSending?: boolean;
+    formatParticipantName?: (participant: ChatParticipant) => string;
+    headerAction?: ReactNode;
+    defaultMessage?: string;
+    onAddParticipantDialogOpenChange?: (open: boolean) => void;
+    messageMaxLength?: number;
+}
+export interface ChatMessageBubbleProps {
+    isOwn: boolean;
+    message: ChatMessage;
+    participants?: ChatParticipant[] | null;
+    avatarSrcResolver?: (src?: string | null) => string | undefined;
+    renderAfterBubble?: (urls: string[]) => ReactNode;
+    formatTime?: (date: string) => string;
+}
+export interface ChatMessageInputProps {
+    onSend: (message: string) => void;
+    labels?: ChatMessageInputLabels;
+    autoFocusKey?: string;
+    isSending?: boolean;
+    defaultMessage?: string;
+    maxLength?: number;
+}
+export interface ChatParticipantDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: (participants: ChatSearchUser[]) => void;
+    onSearch: (query: string) => void;
+    searchResults?: ChatSearchUser[];
+    isSearchLoading?: boolean;
+    isConfirmLoading?: boolean;
+    avatarSrcResolver?: (src?: string | null) => string | undefined;
+    labels?: ChatParticipantDialogLabels;
+}

package/dist/src/components/DataDisplay/Chat/utils/ensureUtc.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Append "Z" suffix to a date string if it has no timezone indicator, ensuring it is parsed as UTC.
+ */
+declare const ensureUtc: (date: string) => string;
+export default ensureUtc;

package/dist/src/components/DataDisplay/Chat/utils/extractUrls.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Extract all URLs (http/https) from a text string.
+ */
+export declare const extractUrls: (body: string) => string[];

package/dist/src/components/DataDisplay/Chat/utils/formatParticipantNames.d.ts

@@ -0,0 +1,7 @@
+import { ChatParticipant } from '../types';
+/**
+ * Format a list of participants into a comma-separated string of names.
+ * An optional formatter can be provided to customize how each participant's name is displayed.
+ */
+declare const formatParticipantNames: (participants?: ChatParticipant[] | null, formatName?: (participant: ChatParticipant) => string) => string;
+export default formatParticipantNames;

package/dist/src/components/DataDisplay/Chip/Chip.d.ts

@@ -0,0 +1,7 @@
+import { ChipProps as ChipPropsMui } from '@mui/material';
+interface ChipProps extends ChipPropsMui {
+    dot?: boolean;
+    lineThrough?: boolean;
+}
+declare const _default: import('react').ForwardRefExoticComponent<Omit<ChipProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/src/components/DataDisplay/Chip/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Chip } from './Chip';
+export default Chip;
+export * from './Chip';

package/dist/src/components/DataDisplay/FileViewer/FileViewer.d.ts

@@ -0,0 +1,22 @@
+import { SxProps } from '@mui/material';
+import { PropsWithChildren } from 'react';
+interface FileViewerPros extends PropsWithChildren {
+    src?: string | null;
+    srcThumb?: string | null;
+    fileName?: string;
+    width?: number | string;
+    height?: number | string;
+    sx?: SxProps;
+    widthLightbox?: number | string;
+    heightLightbox?: number | string;
+    sxLightbox?: SxProps;
+    disableLightbox?: boolean;
+    disableThumb?: boolean;
+    open?: boolean;
+    variant?: "default" | "rounded";
+    onClickThumb?: () => void;
+    onClose?(): void;
+    iconOnly?: boolean;
+}
+declare const FileViewer: ({ src, srcThumb, fileName, children, sx, widthLightbox, heightLightbox, sxLightbox, disableLightbox, disableThumb, open, onClose, onClickThumb, variant, iconOnly, height, width, }: FileViewerPros) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default FileViewer;

package/dist/src/components/DataDisplay/FileViewer/index.d.ts

@@ -0,0 +1,3 @@
+import { default as FileViewer } from './FileViewer';
+export default FileViewer;
+export * from './FileViewer';

package/dist/src/components/DataDisplay/FileViewer/utils/downloadFile.d.ts

@@ -0,0 +1,2 @@
+declare const downloadFile: (src: string, filename?: string) => void;
+export default downloadFile;

package/dist/src/components/DataDisplay/FileViewer/utils/getThumbnailPath.d.ts

@@ -0,0 +1,2 @@
+declare const getThumbnailPath: (iconOnly: boolean, isError: boolean, isDocument: boolean, extension: string, src: string, srcThumb: string) => string | undefined;
+export default getThumbnailPath;

package/dist/src/components/DataDisplay/Icons/ArrowRightIcon.d.ts

@@ -0,0 +1,8 @@
+import { SvgIconProps, SxProps } from '@mui/material';
+interface CloseIconProps {
+    color?: string;
+    sx?: SxProps;
+    fontSize?: SvgIconProps["fontSize"];
+}
+declare const ArrowRightIcon: ({ sx, fontSize, color }: CloseIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ArrowRightIcon;

package/dist/src/components/DataDisplay/Icons/ChatBubbleIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const ChatBubbleIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ChatBubbleIcon;

package/dist/src/components/DataDisplay/Icons/CheckIcon.d.ts

@@ -0,0 +1,5 @@
+interface CheckIconProps {
+    color?: string;
+}
+declare const CheckIcon: ({ color }: CheckIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default CheckIcon;

package/dist/src/components/DataDisplay/Icons/ChevronIcon.d.ts

@@ -0,0 +1,8 @@
+import { SvgIconProps, SxProps } from '@mui/material';
+interface CloseIconProps {
+    color?: string;
+    sx?: SxProps;
+    fontSize?: SvgIconProps["fontSize"];
+}
+declare const ChevronIcon: ({ sx, fontSize, color }: CloseIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ChevronIcon;

package/dist/src/components/DataDisplay/Icons/ChevronLeftDoubleIcon.d.ts

@@ -0,0 +1,7 @@
+import { SxProps } from '@mui/material';
+interface CloseIconProps {
+    color?: string;
+    sx?: SxProps;
+}
+declare const ChevronLeftDoubleIcon: ({ sx, color }: CloseIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ChevronLeftDoubleIcon;

package/dist/src/components/DataDisplay/Icons/CloseIcon.d.ts

@@ -0,0 +1,8 @@
+import { SvgIconProps, SxProps } from '@mui/material';
+interface CloseIconProps {
+    color?: string;
+    sx?: SxProps;
+    fontSize?: SvgIconProps["fontSize"];
+}
+declare const CloseIcon: ({ sx, fontSize, color }: CloseIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default CloseIcon;

package/dist/src/components/DataDisplay/Icons/DeleteIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const DeleteIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default DeleteIcon;

package/dist/src/components/DataDisplay/Icons/DotIcon.d.ts

@@ -0,0 +1,8 @@
+import { SvgIconProps } from '@mui/material';
+interface CheckIconProps {
+    color?: string;
+    fontSize?: SvgIconProps["fontSize"];
+    sx?: SvgIconProps["sx"];
+}
+declare const DotIcon: ({ sx, fontSize, color }: CheckIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default DotIcon;

package/dist/src/components/DataDisplay/Icons/MenuIcon.d.ts

@@ -0,0 +1,5 @@
+interface MenuIconProps {
+    color?: string;
+}
+declare const MenuIcon: ({ color }: MenuIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default MenuIcon;

package/dist/src/components/DataDisplay/Icons/MoreHorizIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const MoreHorizIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default MoreHorizIcon;

package/dist/src/components/DataDisplay/Icons/PenLineIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const PenLineIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default PenLineIcon;

package/dist/src/components/DataDisplay/Icons/PersonAddIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const PersonAddIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default PersonAddIcon;

package/dist/src/components/DataDisplay/Icons/SearchIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const SearchIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default SearchIcon;

package/dist/src/components/DataDisplay/Icons/SendIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const SendIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default SendIcon;

package/dist/src/components/DataDisplay/Icons/UploadIcon.d.ts

@@ -0,0 +1,8 @@
+import { SvgIconProps } from '@mui/material';
+interface CheckIconProps {
+    color?: string;
+    fontSize?: SvgIconProps["fontSize"];
+    sx?: SvgIconProps["sx"];
+}
+declare const UploadIcon: ({ fontSize, sx, color }: CheckIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default UploadIcon;

package/dist/src/components/DataDisplay/Icons/VisibilityIcon.d.ts

@@ -0,0 +1,8 @@
+import { SvgIconProps } from '@mui/material';
+interface CheckIconProps {
+    color?: string;
+    fontSize?: SvgIconProps["fontSize"];
+    sx?: SvgIconProps["sx"];
+}
+declare const VisibilityIcon: ({ sx, fontSize, color }: CheckIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default VisibilityIcon;

package/dist/src/components/DataDisplay/Icons/VisibilityOff.d.ts

@@ -0,0 +1,8 @@
+import { SvgIconProps } from '@mui/material';
+interface CheckIconProps {
+    color?: string;
+    fontSize?: SvgIconProps["fontSize"];
+    sx?: SvgIconProps["sx"];
+}
+declare const VisibilityIcon: ({ sx, fontSize, color }: CheckIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default VisibilityIcon;

package/dist/src/components/DataDisplay/Kanban/Kanban.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { KanbanDataItemProps, KanbanProps } from './types';
+export * from './types';
+type KanbanItemProps = {
+    index: number;
+    style: CSSProperties;
+    data: {
+        activeItemId: string;
+        gutterSize: number;
+        onClickItem: KanbanProps["onClickItem"];
+        items: KanbanDataItemProps[];
+    };
+};
+export declare const VirtualizedKanbanItem: ({ index, data }: KanbanItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Kanban: ({ data, onClickItem, disableCount, onColumnInView, emptyState, chipColumVariant, chipStatus, headerColumnChip, activeItemId, variant, chipColumDot, height, itemPerPage, listWidth, loadMoreItems, }: KanbanProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Kanban;

package/dist/src/components/DataDisplay/Kanban/components/ChipStatusKanban.d.ts

@@ -0,0 +1,17 @@
+import { ChipProps } from '@mui/material';
+import { ReactElement } from 'react';
+import { defaultKanbanChip, HeaderColumnChip } from '../types';
+interface ChipStatusProps {
+    status?: keyof typeof defaultKanbanChip | keyof HeaderColumnChip | string;
+    size?: ChipProps["size"];
+    variant?: ChipProps["variant"];
+    lineThrough?: boolean;
+    dot?: boolean;
+    label?: string;
+    sx?: ChipProps["sx"];
+    deleteIcon?: ReactElement;
+    disabled?: boolean;
+    headerColumnChip?: HeaderColumnChip;
+}
+declare const ChipStatusKanban: ({ label, status, sx, deleteIcon, lineThrough, disabled, headerColumnChip, dot, variant, size, }: ChipStatusProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ChipStatusKanban;

package/dist/src/components/DataDisplay/Kanban/components/EmptyStateOverlay.d.ts

@@ -0,0 +1,5 @@
+import { KanbanProps } from '../types';
+declare const EmptyStateOverlay: ({ emptyState }: {
+    emptyState?: KanbanProps["emptyState"];
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default EmptyStateOverlay;

package/dist/src/components/DataDisplay/Kanban/components/KanbanCard.d.ts

@@ -0,0 +1,10 @@
+import { KanbanCardVariant, KanbanDataItemProps } from '../types';
+export interface KanbanCardProps {
+    item: KanbanDataItemProps;
+    activeItemId: string;
+    gutterSize: number;
+    onClickItem?: (id: string) => void;
+    variant?: KanbanCardVariant;
+}
+declare const KanbanCard: import('react').MemoExoticComponent<({ item, activeItemId, gutterSize, onClickItem, variant }: KanbanCardProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export default KanbanCard;

package/dist/src/components/DataDisplay/Kanban/components/KanbanColumn.d.ts

@@ -0,0 +1,24 @@
+import { HeaderColumnChip, KanbanCardVariant, KanbanDataItemProps } from '../types';
+export interface KanbanColumnProps {
+    name: string;
+    label?: string;
+    count?: number;
+    items: KanbanDataItemProps[];
+    chipColumVariant?: "filled" | "outlined";
+    chipColumDot?: boolean;
+    chipStatus?: string;
+    isLoading?: boolean;
+    isFetching?: boolean;
+    gutterSize: number;
+    itemPerPage?: number;
+    listWidth: number | string;
+    disableCount?: boolean;
+    activeItemId: string;
+    onClickItem?: (id: string) => void;
+    loadMoreItems?: (startIndex: number, stopIndex: number, status?: string) => void;
+    onInView?: (name: string) => void;
+    headerColumnChip?: HeaderColumnChip;
+    variant?: KanbanCardVariant;
+}
+declare const KanbanColumn: import('react').MemoExoticComponent<({ name, label, count, items, isFetching, isLoading, gutterSize, itemPerPage, listWidth, disableCount, loadMoreItems, activeItemId, onClickItem, onInView, chipColumVariant, chipColumDot, chipStatus, headerColumnChip, variant, }: KanbanColumnProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export default KanbanColumn;

package/dist/src/components/DataDisplay/Kanban/hooks/useDragScroll.d.ts

@@ -0,0 +1,7 @@
+import { MouseEvent, RefObject } from 'react';
+declare const useDragScroll: (ref: RefObject<HTMLDivElement | null>) => {
+    onMouseDown: (e: MouseEvent<HTMLElement>) => void;
+    onMouseMove: (e: MouseEvent<HTMLElement>) => void;
+    onMouseUp: () => void;
+};
+export default useDragScroll;

package/dist/src/components/DataDisplay/Kanban/types.d.ts

@@ -0,0 +1,131 @@
+import { ChipProps } from '@mui/material';
+import { MouseEvent, ReactElement, ReactNode } from 'react';
+export type KanbanCardVariant = "primary" | "secondary";
+export type KanbanChipFormat = {
+    color: ChipProps["color"];
+    variant?: ChipProps["variant"];
+};
+export type HeaderColumnChip = Record<string, KanbanChipFormat>;
+/**
+ * Mapping of booking statuses to their corresponding chip variants and colors.
+ * This is used to style the status chips in the Kanban columns.
+ */
+export declare const defaultKanbanChip: Record<string, KanbanChipFormat>;
+/**
+ * Props for configuring the empty state of the Kanban component.
+ */
+export interface EmptyStateProps {
+    title: string;
+    description?: string;
+    buttonText?: string;
+    onButtonClick?: () => void;
+}
+/**
+ * Props for each subtitle item in a Kanban card.
+ */
+export interface SubtitleDataItemProps {
+    text: ReactNode;
+    icon?: ReactNode;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+}
+/**
+ * Props for each item in a Kanban column.
+ * Each item represents a card in the Kanban board.
+ */
+export interface KanbanDataItemProps {
+    id: string;
+    image: string | undefined;
+    imageTitle?: string;
+    headerTitle?: string;
+    title: string;
+    secondaryImage?: string;
+    secondaryImageText?: string;
+    subtitle?: SubtitleDataItemProps;
+    subtitles?: SubtitleDataItemProps[];
+    tag: string;
+    titleLineClamp?: number;
+    Footer?: ReactNode;
+    RightFooter?: ReactNode;
+}
+/**
+ * Props for each column in the Kanban board.
+ * Each column contains multiple Kanban items.
+ */
+export interface KanbanDataProps {
+    name: string;
+    label?: string;
+    count?: number;
+    isLoading?: boolean;
+    isFetching?: boolean;
+    isFetched?: boolean;
+    items: KanbanDataItemProps[];
+}
+export interface KanbanProps {
+    /**
+     * The height of the Kanban component.
+     */
+    height?: string | number;
+    /**
+     * The width of each Kanban list.
+     */
+    listWidth?: string | number;
+    /**
+     * Disables the count of items in the Kanban list.
+     */
+    disableCount?: boolean;
+    /**
+     * The number of items to display per page.
+     */
+    itemPerPage?: number;
+    /**
+     * Variant for the chip column.
+     */
+    chipColumVariant?: "filled" | "outlined";
+    /**
+     * If true, the Kanban column will display a dot indicator in the chip.
+     */
+    chipColumDot?: boolean;
+    /**
+     * Status of the chip in the Kanban column.
+     */
+    chipStatus?: string;
+    /**
+     * Function to load more items when the user scrolls to the end of the list.
+     * @param startIndex
+     * @param stopIndex
+     * @param status
+     */
+    loadMoreItems?: (startIndex: number, stopIndex: number, status?: string) => Promise<void> | void;
+    /**
+     * Function triggered when an item is clicked.
+     * @param id
+     */
+    onClickItem?: (id: string) => void;
+    /**
+     * Trigger when column is visible
+     * @param listName
+     */
+    onColumnInView?: (name: string) => void;
+    /**
+     * The ID of the currently active item.
+     */
+    activeItemId?: string;
+    /**
+     * Custom mapping of booking statuses to chip variants/colors.
+     * Keys can be any string, but the value must be { color, variant? }.
+     */
+    headerColumnChip?: HeaderColumnChip;
+    /**
+     * The Kanban data to be displayed.
+     */
+    data: KanbanDataProps[];
+    /**
+     * Variant of the Kanban cards.
+     * @default "primary"
+     */
+    variant?: KanbanCardVariant;
+    /**
+     * Optional empty state configuration.
+     */
+    emptyState?: ReactElement | EmptyStateProps;
+}