indas-ui 0.1.9 → 0.1.10

package/dist/cjs/components/chat/multimodal-input.js

@@ -14,7 +14,7 @@ const utils_1 = require("../../lib/utils.js");
 const LanguageContext_1 = require("../../contexts/LanguageContext.js");
 /** What the paperclip offers when the host does not say: images, PDFs and documents. */
 exports.DEFAULT_CHAT_ACCEPT = 'image/*,application/pdf,.doc,.docx,.txt';
-function MultimodalInput({ onSubmit, onStop, isLoading = false, placeholder = 'Send a message...', allowFileUpload = true, accept = exports.DEFAULT_CHAT_ACCEPT, multiple = true, attachLabel = 'Attach file', compact = false, disabled = false, disabledReason }) {
+function MultimodalInput({ onSubmit, onStop, isLoading = false, placeholder = 'Send a message...', allowFileUpload = true, accept = exports.DEFAULT_CHAT_ACCEPT, multiple = true, attachLabel = 'Attach file', attachIcon, compact = false, disabled = false, disabledReason }) {
     // Optional: the composer is exported for host apps that have no LanguageProvider, and falls
     // back to the English source text rather than throwing.
     const { t } = (0, LanguageContext_1.useOptionalLanguage)();
@@ -114,7 +114,7 @@ function MultimodalInput({ onSubmit, onStop, isLoading = false, placeholder = 'S
     const removeFile = (index) => {
         setFiles(prev => prev.filter((_, i) => i !== index));
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-[rgb(var(--bg-surface))] shrink-0", compact ? "px-1 py-1" : "border-t border-[rgb(var(--bd-default))] px-4 py-2.5"), children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-3xl mx-auto", children: [disabled && disabledReason && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-2 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/30 text-xs text-amber-700 dark:text-amber-400 flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] }), (0, jsx_runtime_1.jsx)("span", { children: disabledReason })] })), files.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-2 mb-3", children: files.map((file, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 bg-[rgb(var(--bg-app))] border border-[rgb(var(--bd-default))] rounded-lg text-sm", children: [file.type.startsWith('image/') ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Image, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })) : /\.(xlsx|xls|csv)$/i.test(file.name) ? ((0, jsx_runtime_1.jsx)(lucide_react_1.FileSpreadsheet, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.FileIcon, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-default))] truncate max-w-[150px]", children: file.name }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => removeFile(index), "aria-label": `Remove ${file.name}`, className: "text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3" }) })] }, index))) })), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative flex items-center gap-1 bg-[rgb(var(--bg-app))]/60 backdrop-blur-xl border border-[rgb(var(--bd-default))] shadow-lg transition-all duration-250 focus-within:border-[rgb(var(--color-primary))] focus-within:shadow-[0_0_0_4px_rgb(var(--color-primary)/0.12),0_20px_25px_-5px_rgba(0,0,0,0.15)] focus-within:-translate-y-px", compact ? "rounded-xl p-1.5" : "rounded-2xl p-2.5"), children: [allowFileUpload && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: multiple, accept: accept, onChange: handleFileSelect, className: "hidden" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => fileInputRef.current?.click(), className: "shrink-0 !min-h-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]", "aria-label": attachLabel, title: attachLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { className: "w-4 h-4" }) })] })), (0, jsx_runtime_1.jsx)("textarea", { ref: textareaRef, "data-chat-input": true, value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleKeyDown, placeholder: disabled ? t('Conversation closed — start a new chat')
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-[rgb(var(--bg-surface))] shrink-0", compact ? "px-1 py-1" : "border-t border-[rgb(var(--bd-default))] px-4 py-2.5"), children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-3xl mx-auto", children: [disabled && disabledReason && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-2 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/30 text-xs text-amber-700 dark:text-amber-400 flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] }), (0, jsx_runtime_1.jsx)("span", { children: disabledReason })] })), files.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-2 mb-3", children: files.map((file, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 bg-[rgb(var(--bg-app))] border border-[rgb(var(--bd-default))] rounded-lg text-sm", children: [file.type.startsWith('image/') ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Image, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })) : /\.(xlsx|xls|csv)$/i.test(file.name) ? ((0, jsx_runtime_1.jsx)(lucide_react_1.FileSpreadsheet, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.FileIcon, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-default))] truncate max-w-[150px]", children: file.name }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => removeFile(index), "aria-label": `Remove ${file.name}`, className: "text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3" }) })] }, index))) })), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative flex items-center gap-1 bg-[rgb(var(--bg-app))]/60 backdrop-blur-xl border border-[rgb(var(--bd-default))] shadow-lg transition-all duration-250 focus-within:border-[rgb(var(--color-primary))] focus-within:shadow-[0_0_0_4px_rgb(var(--color-primary)/0.12),0_20px_25px_-5px_rgba(0,0,0,0.15)] focus-within:-translate-y-px", compact ? "rounded-xl p-1.5" : "rounded-2xl p-2.5"), children: [allowFileUpload && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: multiple, accept: accept, onChange: handleFileSelect, className: "hidden" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => fileInputRef.current?.click(), className: "shrink-0 !min-h-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]", "aria-label": attachLabel, title: attachLabel, children: attachIcon ?? (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { className: "w-4 h-4" }) })] })), (0, jsx_runtime_1.jsx)("textarea", { ref: textareaRef, "data-chat-input": true, value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleKeyDown, placeholder: disabled ? t('Conversation closed — start a new chat')
                                 : isListening ? t('Listening...')
                                     : placeholder, disabled: isListening || disabled, autoFocus: !disabled, rows: 1, className: (0, utils_1.cn)('flex-1 bg-transparent text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-muted))]', 'resize-none outline-none text-sm', compact ? 'px-2 py-1.5 max-h-[120px]' : 'px-3 py-2.5 max-h-[200px]', 'overflow-y-auto', disabled && 'cursor-not-allowed') }), speechSupported && ((0, jsx_runtime_1.jsx)("button", { onClick: handleVoiceInput, className: (0, utils_1.cn)('shrink-0 !min-h-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors', isListening
                                 ? 'text-red-500 bg-red-500/10 animate-pulse'

package/dist/components/chat/multimodal-input.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Multimodal Input Component
+ * Chat input with auto-expanding textarea, file upload, and voice input
+ */
+import { type ReactNode } from 'react';
 /** What the paperclip offers when the host does not say: images, PDFs and documents. */
 export declare const DEFAULT_CHAT_ACCEPT = "image/*,application/pdf,.doc,.docx,.txt";
 interface MultimodalInputProps {
@@ -15,9 +20,14 @@ interface MultimodalInputProps {
     multiple?: boolean;
     /** Screen-reader name of the paperclip. Default "Attach file". */
     attachLabel?: string;
+    /**
+     * The attach button's icon. Default a paperclip; a host whose button opens more than a file
+     * picker (a menu, a scan) may pass a plus. Sized by the host, e.g. `<Plus className="w-4 h-4" />`.
+     */
+    attachIcon?: ReactNode;
     compact?: boolean;
     disabled?: boolean;
     disabledReason?: string;
 }
-export declare function MultimodalInput({ onSubmit, onStop, isLoading, placeholder, allowFileUpload, accept, multiple, attachLabel, compact, disabled, disabledReason }: MultimodalInputProps): import("react").JSX.Element;
+export declare function MultimodalInput({ onSubmit, onStop, isLoading, placeholder, allowFileUpload, accept, multiple, attachLabel, attachIcon, compact, disabled, disabledReason }: MultimodalInputProps): import("react").JSX.Element;
 export {};

package/dist/components/chat/multimodal-input.js

@@ -10,7 +10,7 @@ import { cn } from '../../lib/utils.js';
 import { useOptionalLanguage } from '../../contexts/LanguageContext.js';
 /** What the paperclip offers when the host does not say: images, PDFs and documents. */
 export const DEFAULT_CHAT_ACCEPT = 'image/*,application/pdf,.doc,.docx,.txt';
-export function MultimodalInput({ onSubmit, onStop, isLoading = false, placeholder = 'Send a message...', allowFileUpload = true, accept = DEFAULT_CHAT_ACCEPT, multiple = true, attachLabel = 'Attach file', compact = false, disabled = false, disabledReason }) {
+export function MultimodalInput({ onSubmit, onStop, isLoading = false, placeholder = 'Send a message...', allowFileUpload = true, accept = DEFAULT_CHAT_ACCEPT, multiple = true, attachLabel = 'Attach file', attachIcon, compact = false, disabled = false, disabledReason }) {
     // Optional: the composer is exported for host apps that have no LanguageProvider, and falls
     // back to the English source text rather than throwing.
     const { t } = useOptionalLanguage();
@@ -110,7 +110,7 @@ export function MultimodalInput({ onSubmit, onStop, isLoading = false, placehold
     const removeFile = (index) => {
         setFiles(prev => prev.filter((_, i) => i !== index));
     };
-    return (_jsx("div", { className: cn("bg-[rgb(var(--bg-surface))] shrink-0", compact ? "px-1 py-1" : "border-t border-[rgb(var(--bd-default))] px-4 py-2.5"), children: _jsxs("div", { className: "max-w-3xl mx-auto", children: [disabled && disabledReason && (_jsxs("div", { className: "mb-2 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/30 text-xs text-amber-700 dark:text-amber-400 flex items-center gap-2", children: [_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] }), _jsx("span", { children: disabledReason })] })), files.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mb-3", children: files.map((file, index) => (_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-[rgb(var(--bg-app))] border border-[rgb(var(--bd-default))] rounded-lg text-sm", children: [file.type.startsWith('image/') ? (_jsx(ImageIcon, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })) : /\.(xlsx|xls|csv)$/i.test(file.name) ? (_jsx(FileSpreadsheet, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })) : (_jsx(FileIcon, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })), _jsx("span", { className: "text-[rgb(var(--fg-default))] truncate max-w-[150px]", children: file.name }), _jsx("button", { type: "button", onClick: () => removeFile(index), "aria-label": `Remove ${file.name}`, className: "text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] transition-colors", children: _jsx(X, { className: "w-3 h-3" }) })] }, index))) })), _jsxs("div", { className: cn("relative flex items-center gap-1 bg-[rgb(var(--bg-app))]/60 backdrop-blur-xl border border-[rgb(var(--bd-default))] shadow-lg transition-all duration-250 focus-within:border-[rgb(var(--color-primary))] focus-within:shadow-[0_0_0_4px_rgb(var(--color-primary)/0.12),0_20px_25px_-5px_rgba(0,0,0,0.15)] focus-within:-translate-y-px", compact ? "rounded-xl p-1.5" : "rounded-2xl p-2.5"), children: [allowFileUpload && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: multiple, accept: accept, onChange: handleFileSelect, className: "hidden" }), _jsx("button", { onClick: () => fileInputRef.current?.click(), className: "shrink-0 !min-h-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]", "aria-label": attachLabel, title: attachLabel, children: _jsx(Paperclip, { className: "w-4 h-4" }) })] })), _jsx("textarea", { ref: textareaRef, "data-chat-input": true, value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleKeyDown, placeholder: disabled ? t('Conversation closed — start a new chat')
+    return (_jsx("div", { className: cn("bg-[rgb(var(--bg-surface))] shrink-0", compact ? "px-1 py-1" : "border-t border-[rgb(var(--bd-default))] px-4 py-2.5"), children: _jsxs("div", { className: "max-w-3xl mx-auto", children: [disabled && disabledReason && (_jsxs("div", { className: "mb-2 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/30 text-xs text-amber-700 dark:text-amber-400 flex items-center gap-2", children: [_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] }), _jsx("span", { children: disabledReason })] })), files.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mb-3", children: files.map((file, index) => (_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-[rgb(var(--bg-app))] border border-[rgb(var(--bd-default))] rounded-lg text-sm", children: [file.type.startsWith('image/') ? (_jsx(ImageIcon, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })) : /\.(xlsx|xls|csv)$/i.test(file.name) ? (_jsx(FileSpreadsheet, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })) : (_jsx(FileIcon, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })), _jsx("span", { className: "text-[rgb(var(--fg-default))] truncate max-w-[150px]", children: file.name }), _jsx("button", { type: "button", onClick: () => removeFile(index), "aria-label": `Remove ${file.name}`, className: "text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] transition-colors", children: _jsx(X, { className: "w-3 h-3" }) })] }, index))) })), _jsxs("div", { className: cn("relative flex items-center gap-1 bg-[rgb(var(--bg-app))]/60 backdrop-blur-xl border border-[rgb(var(--bd-default))] shadow-lg transition-all duration-250 focus-within:border-[rgb(var(--color-primary))] focus-within:shadow-[0_0_0_4px_rgb(var(--color-primary)/0.12),0_20px_25px_-5px_rgba(0,0,0,0.15)] focus-within:-translate-y-px", compact ? "rounded-xl p-1.5" : "rounded-2xl p-2.5"), children: [allowFileUpload && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: multiple, accept: accept, onChange: handleFileSelect, className: "hidden" }), _jsx("button", { onClick: () => fileInputRef.current?.click(), className: "shrink-0 !min-h-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]", "aria-label": attachLabel, title: attachLabel, children: attachIcon ?? _jsx(Paperclip, { className: "w-4 h-4" }) })] })), _jsx("textarea", { ref: textareaRef, "data-chat-input": true, value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleKeyDown, placeholder: disabled ? t('Conversation closed — start a new chat')
                                 : isListening ? t('Listening...')
                                     : placeholder, disabled: isListening || disabled, autoFocus: !disabled, rows: 1, className: cn('flex-1 bg-transparent text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-muted))]', 'resize-none outline-none text-sm', compact ? 'px-2 py-1.5 max-h-[120px]' : 'px-3 py-2.5 max-h-[200px]', 'overflow-y-auto', disabled && 'cursor-not-allowed') }), speechSupported && (_jsx("button", { onClick: handleVoiceInput, className: cn('shrink-0 !min-h-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors', isListening
                                 ? 'text-red-500 bg-red-500/10 animate-pulse'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indas-ui",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Indas UI — React component library for business apps: Tailwind design tokens, Radix primitives, Lucide icons, DataGrid, dashboards and charts.",
   "license": "MIT",
   "author": "Indas Analytics Pvt Ltd",