@juspay/blend-design-system 0.0.22 → 0.0.23-beta

package/dist/components/ChatInput/ChatInput.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ChatInputProps, AttachedFile } from './types';
+export declare const getDocIcon: (fileType: AttachedFile["type"]) => React.ReactNode;
+declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default ChatInput;

package/dist/components/ChatInput/chatInput.tokens.d.ts

@@ -0,0 +1,147 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+/**
+ * ChatInput Tokens following the pattern: [target].property.[state]
+ *
+ * Structure:
+ * - container: Main chat input container
+ * - textarea: Text input area
+ * - filesContainer: File attachment display area
+ * - bottomActions: Action buttons container
+ * - overflowTag: "+X more" files button
+ * - topQueries: Top queries section with header and items
+ */
+export type ChatInputTokensType = Readonly<{
+    container: {
+        backgroundColor: {
+            default: CSSObject['backgroundColor'];
+            hover: CSSObject['backgroundColor'];
+            disabled: CSSObject['backgroundColor'];
+        };
+        border: {
+            default: CSSObject['border'];
+            focus: CSSObject['border'];
+        };
+        borderRadius: CSSObject['borderRadius'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingRight: CSSObject['paddingRight'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        gap: CSSObject['gap'];
+        minHeight: CSSObject['minHeight'];
+        transition: CSSObject['transition'];
+        boxShadow: {
+            default: CSSObject['boxShadow'];
+            hover: CSSObject['boxShadow'];
+            focus: CSSObject['boxShadow'];
+        };
+    };
+    attachmentContainer: {
+        backgroundColor: CSSObject['backgroundColor'];
+        borderRadius: CSSObject['borderRadius'];
+        padding: CSSObject['padding'];
+    };
+    textarea: {
+        backgroundColor: CSSObject['backgroundColor'];
+        color: CSSObject['color'];
+        fontSize: CSSObject['fontSize'];
+        lineHeight: CSSObject['lineHeight'];
+        paddingX: CSSObject['padding'];
+        paddingY: CSSObject['padding'];
+        border: CSSObject['border'];
+        borderRadius: CSSObject['borderRadius'];
+        placeholder: {
+            color: CSSObject['color'];
+        };
+        resize: CSSObject['resize'];
+        fontFamily: CSSObject['fontFamily'];
+        minHeight: CSSObject['minHeight'];
+        maxHeight: CSSObject['maxHeight'];
+        overflowY: CSSObject['overflowY'];
+    };
+    filesContainer: {
+        gap: CSSObject['gap'];
+        paddingX: CSSObject['padding'];
+        paddingY: CSSObject['padding'];
+        maxHeight: CSSObject['maxHeight'];
+        overflowY: CSSObject['overflowY'];
+    };
+    bottomActions: {
+        paddingX: CSSObject['padding'];
+        paddingY: CSSObject['padding'];
+        gap: CSSObject['gap'];
+        justifyContent: CSSObject['justifyContent'];
+    };
+    overflowTag: {
+        backgroundColor: {
+            default: CSSObject['backgroundColor'];
+            hover: CSSObject['backgroundColor'];
+            active: CSSObject['backgroundColor'];
+        };
+        color: {
+            default: CSSObject['color'];
+            hover: CSSObject['color'];
+            active: CSSObject['color'];
+        };
+        border: CSSObject['border'];
+        borderRadius: CSSObject['borderRadius'];
+        paddingX: CSSObject['padding'];
+        paddingY: CSSObject['padding'];
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        gap: CSSObject['gap'];
+        transition: CSSObject['transition'];
+        cursor: CSSObject['cursor'];
+    };
+    topQueries: {
+        container: {
+            borderTop: CSSObject['borderTop'];
+            paddingTop: CSSObject['paddingTop'];
+        };
+        header: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            paddingX: CSSObject['padding'];
+            paddingY: CSSObject['padding'];
+            textTransform: CSSObject['textTransform'];
+            backgroundColor: CSSObject['backgroundColor'];
+            flexShrink: CSSObject['flexShrink'];
+        };
+        scrollContainer: {
+            overflowY: CSSObject['overflowY'];
+            maxHeightOffset: number;
+        };
+        item: {
+            backgroundColor: {
+                default: CSSObject['backgroundColor'];
+                hover: CSSObject['backgroundColor'];
+                active: CSSObject['backgroundColor'];
+                disabled: CSSObject['backgroundColor'];
+            };
+            color: {
+                default: CSSObject['color'];
+                hover: CSSObject['color'];
+                active: CSSObject['color'];
+                disabled: CSSObject['color'];
+            };
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            paddingX: CSSObject['padding'];
+            paddingY: CSSObject['padding'];
+            border: CSSObject['border'];
+            transition: CSSObject['transition'];
+            cursor: CSSObject['cursor'];
+            opacity: {
+                default: CSSObject['opacity'];
+                disabled: CSSObject['opacity'];
+            };
+        };
+    };
+}>;
+export type ResponsiveChatInputTokensType = {
+    [key in keyof BreakpointType]: ChatInputTokensType;
+};
+export declare const getChatInputTokens: (foundationToken: FoundationTokenType) => ResponsiveChatInputTokensType;
+export default getChatInputTokens;

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

@@ -0,0 +1,2 @@
+export { default as ChatInput } from './ChatInput';
+export * from './types';

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

@@ -0,0 +1,101 @@
+import { ReactNode } from 'react';
+import { MenuProps } from '../Menu/types';
+export type AttachedFile = {
+    id: string;
+    name: string;
+    type: 'image' | 'pdf' | 'csv' | 'text' | 'other';
+    size?: number;
+    url?: string;
+    preview?: string;
+};
+export type TopQuery = {
+    id: string;
+    text: string;
+};
+export type ChatInputProps = {
+    value?: string;
+    onChange?: (value: string) => void;
+    onSend?: (message: string, files: AttachedFile[]) => void;
+    onAttachFiles?: (files: File[]) => void;
+    onVoiceRecord?: () => void;
+    onFileRemove?: (fileId: string) => void;
+    onFileClick?: (file: AttachedFile) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    maxLength?: number;
+    autoResize?: boolean;
+    attachedFiles?: AttachedFile[];
+    topQueries?: TopQuery[];
+    onTopQuerySelect?: (query: TopQuery) => void;
+    topQueriesMaxHeight?: number;
+    attachButtonIcon?: ReactNode;
+    voiceButtonIcon?: ReactNode;
+    sendButtonIcon?: ReactNode;
+    overflowMenuProps?: Partial<MenuProps>;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+};
+export type ChatInputTokens = {
+    container: {
+        backgroundColor: string;
+        border: string;
+        borderRadius: string;
+        padding: string;
+        gap: string;
+        minHeight: string;
+        maxHeight: string;
+    };
+    textarea: {
+        backgroundColor: string;
+        color: string;
+        fontSize: string;
+        lineHeight: string;
+        padding: string;
+        border: string;
+        borderRadius: string;
+        placeholder: {
+            color: string;
+        };
+        resize: string;
+        fontFamily: string;
+    };
+    filesContainer: {
+        gap: string;
+        padding: string;
+        maxHeight: string;
+        overflowBehavior: string;
+    };
+    bottomActions: {
+        padding: string;
+        gap: string;
+        justifyContent: string;
+    };
+    actionButton: {
+        size: string;
+        padding: string;
+        borderRadius: string;
+        backgroundColor: {
+            default: string;
+            hover: string;
+            active: string;
+            disabled: string;
+        };
+        color: {
+            default: string;
+            hover: string;
+            active: string;
+            disabled: string;
+        };
+        border: string;
+    };
+    overflowTag: {
+        backgroundColor: string;
+        color: string;
+        border: string;
+        borderRadius: string;
+        padding: string;
+        fontSize: string;
+        fontWeight: string;
+        cursor: string;
+    };
+};

package/dist/components/ChatInput/utils.d.ts

@@ -0,0 +1,26 @@
+import { AttachedFile } from './types';
+import { MenuItemType } from '../Menu/types';
+/**
+ * Determine the file type from a File object
+ */
+export declare const getFileType: (file: File) => AttachedFile["type"];
+/**
+ * Create menu items for overflow files
+ */
+export declare const createOverflowMenuItems: (hiddenFiles: AttachedFile[], onFileRemove: (fileId: string) => void, onFileClick: (file: AttachedFile) => void) => MenuItemType[];
+/**
+ * Handle textarea auto-resize functionality
+ */
+export declare const handleAutoResize: (element: HTMLTextAreaElement | null, autoResize: boolean) => void;
+/**
+ * Check if Enter key should trigger send
+ */
+export declare const shouldSendOnEnter: (key: string, shiftKey: boolean, metaKey: boolean, ctrlKey: boolean) => boolean;
+/**
+ * Validate message length against maxLength
+ */
+export declare const isValidMessageLength: (message: string, maxLength?: number) => boolean;
+/**
+ * Convert File objects to AttachedFile objects
+ */
+export declare const convertFilesToAttachedFiles: (files: File[]) => AttachedFile[];

package/dist/components/Sidebar/sidebar.tokens.d.ts

@@ -62,6 +62,11 @@ export type SidebarTokenType = {
             };
         };
     };
+    directory: {
+        gap: CSSObject['gap'];
+        paddingX: CSSObject['padding'];
+        paddingY: CSSObject['padding'];
+    };
     footer: {
         backgroundColor: CSSObject['backgroundColor'];
         padding: {

package/dist/global-utils/GlobalUtils.d.ts

@@ -1 +1,2 @@
 export declare const toPixels: (value: string | number | undefined) => number;
+export declare const capitalizeFirstLetter: (string: string) => string;