@juspay/blend-design-system 0.0.22 → 0.0.23

package/dist/assets/main.css

@@ -1 +1 @@
-[data-vaul-drawer][data-vaul-drawer-direction=bottom]:after{display:none}.react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.blend-workflow-canvas .react-flow__node{cursor:pointer;padding:0;border:none;background:transparent;border-radius:0;box-shadow:none}.blend-workflow-canvas .react-flow__node:hover,.blend-workflow-canvas .react-flow__node.selected,.blend-workflow-canvas .react-flow__node.selectable:hover{padding:0;border:none;background:transparent;box-shadow:none}.blend-workflow-canvas .react-flow__edge{cursor:pointer}.blend-workflow-canvas .react-flow__attribution{display:none}
+[data-vaul-drawer][data-vaul-drawer-direction=bottom]:after{display:none}.drawer-content>.drawer-body:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}[data-vaul-drawer-direction=top] .drawer-content>.drawer-body:last-child{border-top-left-radius:inherit;border-top-right-radius:inherit}[data-vaul-drawer-direction=left] .drawer-content>.drawer-body:last-child{border-bottom-left-radius:inherit}[data-vaul-drawer-direction=right] .drawer-content>.drawer-body:last-child{border-bottom-right-radius:inherit}.react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.blend-workflow-canvas .react-flow__node{cursor:pointer;padding:0;border:none;background:transparent;border-radius:0;box-shadow:none}.blend-workflow-canvas .react-flow__node:hover,.blend-workflow-canvas .react-flow__node.selected,.blend-workflow-canvas .react-flow__node.selectable:hover{padding:0;border:none;background:transparent;box-shadow:none}.blend-workflow-canvas .react-flow__edge{cursor:pointer}.blend-workflow-canvas .react-flow__attribution{display:none}

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/Drawer/components/DrawerBase.d.ts

@@ -30,6 +30,9 @@ export declare const DrawerBody: React.ForwardRefExoticComponent<{
     overflowY?: "auto" | "hidden" | "scroll" | "visible";
     noPadding?: boolean;
     hasFooter?: boolean;
+    direction?: "top" | "bottom" | "left" | "right";
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & {
+    direction?: "top" | "bottom" | "left" | "right";
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
 export declare const DrawerClose: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -145,6 +145,10 @@ export type DrawerFooterProps = {
      * Custom class name
      */
     className?: string;
+    /**
+     * The direction of the drawer (used to apply appropriate border radius)
+     */
+    direction?: 'top' | 'bottom' | 'left' | 'right';
 };
 export type DrawerCloseProps = {
     /**

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;

package/dist/main.d.ts

@@ -35,6 +35,8 @@ export * from './components/KeyValuePair';
 export * from './components/VirtualList';
 export * from './components/Upload';
 export * from './components/WorkflowCanvas';
+export * from './components/ChatInput';
+export * from './components/CodeBlock';
 export * from './components/ButtonGroup';
 export * from './components/Button';
 export * from './context';