indas-ui 0.1.0 → 0.1.1

package/dist/cjs/components/chat/index.js

@@ -0,0 +1,19 @@
+'use client';
+"use strict";
+// Chat Components - Centralized exports
+//
+// Only the backend-agnostic pieces are exported. `Chat` itself is deliberately left out: it is
+// bound to Estimo's stack (next-auth's useSession, the /api/synthia endpoints in lib/api/ai/chat,
+// and Estimo's alert and language contexts), so a host app on a different backend cannot use it.
+// `Messages` and `MultimodalInput` take everything they render as props and so travel anywhere.
+//
+// Hosts that want the full assembly compose it themselves: SidePanel (from 'indas-ui/layout') for
+// the conversation rail, Messages for the transcript, MultimodalInput for the composer.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatPromptNavigator = exports.MultimodalInput = exports.Messages = void 0;
+var ai_messages_1 = require("./ai-messages.js");
+Object.defineProperty(exports, "Messages", { enumerable: true, get: function () { return ai_messages_1.Messages; } });
+var multimodal_input_1 = require("./multimodal-input.js");
+Object.defineProperty(exports, "MultimodalInput", { enumerable: true, get: function () { return multimodal_input_1.MultimodalInput; } });
+var chat_prompt_navigator_1 = require("./chat-prompt-navigator.js");
+Object.defineProperty(exports, "ChatPromptNavigator", { enumerable: true, get: function () { return chat_prompt_navigator_1.ChatPromptNavigator; } });

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

@@ -12,7 +12,9 @@ const lucide_react_1 = require("lucide-react");
 const utils_1 = require("../../lib/utils.js");
 const LanguageContext_1 = require("../../contexts/LanguageContext.js");
 function MultimodalInput({ onSubmit, onStop, isLoading = false, placeholder = 'Send a message...', allowFileUpload = true, compact = false, disabled = false, disabledReason }) {
-    const { t } = (0, LanguageContext_1.useLanguage)();
+    // 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)();
     const [input, setInput] = (0, react_1.useState)('');
     const [files, setFiles] = (0, react_1.useState)([]);
     const [isListening, setIsListening] = (0, react_1.useState)(false);

package/dist/cjs/components/forms/date-picker/DatePicker.js

@@ -48,7 +48,7 @@ const shared_utils_1 = require("./shared-utils.js");
 // ============================================
 // DatePicker Component (Single/Range dates without time)
 // ============================================
-function DatePicker({ value, onChange, mode = 'single', placeholder = 'Select date...', label, error, disabled = false, minDate, maxDate, className, showTime = false, showFromTo = false, returnFormat = 'date', inline = false, iconOnly = false, popoverAlign, presets }) {
+function DatePicker({ id, 'aria-label': ariaLabel, value, onChange, mode = 'single', placeholder = 'Select date...', label, error, disabled = false, minDate, maxDate, className, showTime = false, showFromTo = false, returnFormat = 'date', inline = false, iconOnly = false, popoverAlign, presets }) {
     const [isOpen, setIsOpen] = React.useState(false);
     const [currentMonth, setCurrentMonth] = React.useState(new Date());
     const [secondMonth, setSecondMonth] = React.useState(() => {
@@ -703,7 +703,7 @@ function DatePicker({ value, onChange, mode = 'single', placeholder = 'Select da
                                 ? `Date filter: ${selectedRange.from ? new Date(selectedRange.from).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }) : ''}${selectedRange.to ? ` – ${new Date(selectedRange.to).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}` : ''}`
                                 : 'Select date range', children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { className: "h-3.5 w-3.5 flex-shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline text-xs", children: selectedRange.from || selectedRange.to
                                         ? `${selectedRange.from ? new Date(selectedRange.from).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }) : ''}${selectedRange.to ? ` – ${new Date(selectedRange.to).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })}` : ''}`
-                                        : 'Date' }), (selectedRange.from || selectedRange.to) && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-[rgb(var(--color-primary))] ring-1 ring-[rgb(var(--bg-surface))]" }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "relative", ref: inputWrapperRef, children: (0, jsx_runtime_1.jsx)(ui_2.Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, placeholder: getPlaceholder(), disabled: disabled, error: error, className: (0, utils_1.cn)('pl-2 pr-9 text-xs w-full', error && 'border-red-300'), onFocus: () => !disabled && setIsOpen(true), rightIcon: lucide_react_1.Calendar, onRightIconClick: () => !disabled && setIsOpen(!isOpen) }) })) }), (0, jsx_runtime_1.jsx)(Popover.Portal, { container: typeof document !== 'undefined' ? document.body : undefined, children: (0, jsx_runtime_1.jsxs)(Popover.Content, { ref: calendarRef, className: (0, utils_1.cn)("z-[300] bg-[rgb(var(--bg-surface))] rounded-xl shadow-2xl border border-[rgb(var(--bd-default))] backdrop-blur-sm", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2", mode === 'range' ? 'w-[95vw] sm:w-auto sm:min-w-[580px] p-2' : 'w-[95vw] sm:w-auto sm:min-w-[280px] p-3', 'max-w-[calc(100vw-2rem)]'), side: "bottom", align: popoverAlign ?? (mode === 'range' ? 'end' : 'start'), sideOffset: 8, avoidCollisions: true, collisionPadding: 16, sticky: "always", onOpenAutoFocus: (e) => e.preventDefault(), onKeyDown: handleCalendarKeyDown, tabIndex: -1, onInteractOutside: (e) => {
+                                        : 'Date' }), (selectedRange.from || selectedRange.to) && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-[rgb(var(--color-primary))] ring-1 ring-[rgb(var(--bg-surface))]" }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "relative", ref: inputWrapperRef, onClick: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsx)(ui_2.Input, { id: id, "aria-label": ariaLabel, value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, placeholder: getPlaceholder(), disabled: disabled, error: error, className: (0, utils_1.cn)('pl-2 pr-9 text-xs w-full', error && 'border-red-300'), onFocus: () => !disabled && setIsOpen(true), rightIcon: lucide_react_1.Calendar, onRightIconClick: () => !disabled && setIsOpen(!isOpen) }) })) }), (0, jsx_runtime_1.jsx)(Popover.Portal, { container: typeof document !== 'undefined' ? document.body : undefined, children: (0, jsx_runtime_1.jsxs)(Popover.Content, { ref: calendarRef, className: (0, utils_1.cn)("z-[300] bg-[rgb(var(--bg-surface))] rounded-xl shadow-2xl border border-[rgb(var(--bd-default))] backdrop-blur-sm", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2", mode === 'range' ? 'w-[95vw] sm:w-auto sm:min-w-[580px] p-2' : 'w-[95vw] sm:w-auto sm:min-w-[280px] p-3', 'max-w-[calc(100vw-2rem)]'), side: "bottom", align: popoverAlign ?? (mode === 'range' ? 'end' : 'start'), sideOffset: 8, avoidCollisions: true, collisionPadding: 16, sticky: "always", onOpenAutoFocus: (e) => e.preventDefault(), onKeyDown: handleCalendarKeyDown, tabIndex: -1, onInteractOutside: (e) => {
                                 // Prevent closing when interacting with nested Radix portals (like Dropdowns)
                                 const target = e.target;
                                 if (target?.closest('[data-radix-popper-content-wrapper]')) {

package/dist/cjs/components/forms/file-attachment/FileAttachment.js

@@ -40,7 +40,7 @@ const React = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const framer_motion_1 = require("framer-motion");
 const react_image_crop_1 = __importStar(require("react-image-crop"));
-require("react-image-crop/dist/ReactCrop.css");
+
 const lucide_react_1 = require("lucide-react");
 const utils_1 = require("../../../lib/utils.js");
 const ui_1 = require("../../ui/index.js");

package/dist/cjs/components/layout/index.js

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FloatingActionButton = exports.Grid = exports.Page = exports.AppShell = exports.CompactFooter = exports.Footer = exports.DynamicSidebar = void 0;
+exports.SidePanel = exports.FloatingActionButton = exports.Grid = exports.Page = exports.AppShell = exports.CompactFooter = exports.Footer = exports.DynamicSidebar = void 0;
 // Layout Components - Centralized exports
 var sidebar_1 = require("./sidebar.js");
 Object.defineProperty(exports, "DynamicSidebar", { enumerable: true, get: function () { return sidebar_1.DynamicSidebar; } });
@@ -14,3 +14,5 @@ Object.defineProperty(exports, "Page", { enumerable: true, get: function () { re
 Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return app_shell_1.Grid; } });
 var floating_action_button_1 = require("./floating-action-button.js");
 Object.defineProperty(exports, "FloatingActionButton", { enumerable: true, get: function () { return floating_action_button_1.FloatingActionButton; } });
+var side_panel_1 = require("./side-panel.js");
+Object.defineProperty(exports, "SidePanel", { enumerable: true, get: function () { return side_panel_1.SidePanel; } });

package/dist/cjs/components/layout/sidebar.js

@@ -48,7 +48,7 @@ const useTranslation_1 = require("../../hooks/useTranslation.js");
 const ui_1 = require("../ui/index.js");
 const api_1 = require("../../lib/api/index.js");
 const utils_2 = require("../../lib/utils.js");
-require("../../styles/sidebar-scrollbar.css");
+
 const react_dom_1 = require("react-dom");
 const SidebarContextMenu_1 = require("./SidebarContextMenu.js");
 const SidebarPreferencesContext_1 = require("../../contexts/SidebarPreferencesContext.js");

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

@@ -0,0 +1,5 @@
+export { Messages } from './ai-messages.js';
+export type { SelectableItem } from './ai-messages.js';
+export { MultimodalInput } from './multimodal-input.js';
+export { ChatPromptNavigator } from './chat-prompt-navigator.js';
+export type { Message, Conversation, UIDataEntry, UIDataItem, TokenUsage } from '../../lib/api/ai/types.js';

package/dist/components/chat/index.js

@@ -0,0 +1,13 @@
+'use client';
+// Chat Components - Centralized exports
+//
+// Only the backend-agnostic pieces are exported. `Chat` itself is deliberately left out: it is
+// bound to Estimo's stack (next-auth's useSession, the /api/synthia endpoints in lib/api/ai/chat,
+// and Estimo's alert and language contexts), so a host app on a different backend cannot use it.
+// `Messages` and `MultimodalInput` take everything they render as props and so travel anywhere.
+//
+// Hosts that want the full assembly compose it themselves: SidePanel (from 'indas-ui/layout') for
+// the conversation rail, Messages for the transcript, MultimodalInput for the composer.
+export { Messages } from './ai-messages.js';
+export { MultimodalInput } from './multimodal-input.js';
+export { ChatPromptNavigator } from './chat-prompt-navigator.js';

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

@@ -7,9 +7,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { Send, Paperclip, Mic, MicOff, X, FileIcon, Image as ImageIcon } from 'lucide-react';
 import { cn } from '../../lib/utils.js';
-import { useLanguage } from '../../contexts/LanguageContext.js';
+import { useOptionalLanguage } from '../../contexts/LanguageContext.js';
 export function MultimodalInput({ onSubmit, onStop, isLoading = false, placeholder = 'Send a message...', allowFileUpload = true, compact = false, disabled = false, disabledReason }) {
-    const { t } = useLanguage();
+    // 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();
     const [input, setInput] = useState('');
     const [files, setFiles] = useState([]);
     const [isListening, setIsListening] = useState(false);

package/dist/components/forms/date-picker/DatePicker.d.ts

@@ -4,6 +4,10 @@ export interface DateRange {
     to?: Date;
 }
 export interface DatePickerProps {
+    /** Forwarded to the text input so a <label htmlFor> can target it. */
+    id?: string;
+    /** Accessible name for the input when no visible label is rendered. */
+    'aria-label'?: string;
     value?: Date | DateRange | string;
     onChange?: (date: Date | DateRange | string | undefined) => void;
     mode?: 'single' | 'range';
@@ -28,4 +32,4 @@ export interface DatePickerProps {
         value: Date | DateRange;
     }>;
 }
-export declare function DatePicker({ value, onChange, mode, placeholder, label, error, disabled, minDate, maxDate, className, showTime, showFromTo, returnFormat, inline, iconOnly, popoverAlign, presets }: DatePickerProps): React.JSX.Element;
+export declare function DatePicker({ id, 'aria-label': ariaLabel, value, onChange, mode, placeholder, label, error, disabled, minDate, maxDate, className, showTime, showFromTo, returnFormat, inline, iconOnly, popoverAlign, presets }: DatePickerProps): React.JSX.Element;

package/dist/components/forms/date-picker/DatePicker.js

@@ -12,7 +12,7 @@ import { MONTHS, WEEKDAYS, PERIOD_OPTIONS, TIME_OPTIONS, getDaysInMonth, getFirs
 // ============================================
 // DatePicker Component (Single/Range dates without time)
 // ============================================
-export function DatePicker({ value, onChange, mode = 'single', placeholder = 'Select date...', label, error, disabled = false, minDate, maxDate, className, showTime = false, showFromTo = false, returnFormat = 'date', inline = false, iconOnly = false, popoverAlign, presets }) {
+export function DatePicker({ id, 'aria-label': ariaLabel, value, onChange, mode = 'single', placeholder = 'Select date...', label, error, disabled = false, minDate, maxDate, className, showTime = false, showFromTo = false, returnFormat = 'date', inline = false, iconOnly = false, popoverAlign, presets }) {
     const [isOpen, setIsOpen] = React.useState(false);
     const [currentMonth, setCurrentMonth] = React.useState(new Date());
     const [secondMonth, setSecondMonth] = React.useState(() => {
@@ -667,7 +667,7 @@ export function DatePicker({ value, onChange, mode = 'single', placeholder = 'Se
                                 ? `Date filter: ${selectedRange.from ? new Date(selectedRange.from).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }) : ''}${selectedRange.to ? ` – ${new Date(selectedRange.to).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}` : ''}`
                                 : 'Select date range', children: [_jsx(CalendarDays, { className: "h-3.5 w-3.5 flex-shrink-0" }), _jsx("span", { className: "hidden sm:inline text-xs", children: selectedRange.from || selectedRange.to
                                         ? `${selectedRange.from ? new Date(selectedRange.from).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }) : ''}${selectedRange.to ? ` – ${new Date(selectedRange.to).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })}` : ''}`
-                                        : 'Date' }), (selectedRange.from || selectedRange.to) && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-[rgb(var(--color-primary))] ring-1 ring-[rgb(var(--bg-surface))]" }))] })) : (_jsx("div", { className: "relative", ref: inputWrapperRef, children: _jsx(Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, placeholder: getPlaceholder(), disabled: disabled, error: error, className: cn('pl-2 pr-9 text-xs w-full', error && 'border-red-300'), onFocus: () => !disabled && setIsOpen(true), rightIcon: Calendar, onRightIconClick: () => !disabled && setIsOpen(!isOpen) }) })) }), _jsx(Popover.Portal, { container: typeof document !== 'undefined' ? document.body : undefined, children: _jsxs(Popover.Content, { ref: calendarRef, className: cn("z-[300] bg-[rgb(var(--bg-surface))] rounded-xl shadow-2xl border border-[rgb(var(--bd-default))] backdrop-blur-sm", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2", mode === 'range' ? 'w-[95vw] sm:w-auto sm:min-w-[580px] p-2' : 'w-[95vw] sm:w-auto sm:min-w-[280px] p-3', 'max-w-[calc(100vw-2rem)]'), side: "bottom", align: popoverAlign ?? (mode === 'range' ? 'end' : 'start'), sideOffset: 8, avoidCollisions: true, collisionPadding: 16, sticky: "always", onOpenAutoFocus: (e) => e.preventDefault(), onKeyDown: handleCalendarKeyDown, tabIndex: -1, onInteractOutside: (e) => {
+                                        : 'Date' }), (selectedRange.from || selectedRange.to) && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-[rgb(var(--color-primary))] ring-1 ring-[rgb(var(--bg-surface))]" }))] })) : (_jsx("div", { className: "relative", ref: inputWrapperRef, onClick: (e) => e.preventDefault(), children: _jsx(Input, { id: id, "aria-label": ariaLabel, value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, placeholder: getPlaceholder(), disabled: disabled, error: error, className: cn('pl-2 pr-9 text-xs w-full', error && 'border-red-300'), onFocus: () => !disabled && setIsOpen(true), rightIcon: Calendar, onRightIconClick: () => !disabled && setIsOpen(!isOpen) }) })) }), _jsx(Popover.Portal, { container: typeof document !== 'undefined' ? document.body : undefined, children: _jsxs(Popover.Content, { ref: calendarRef, className: cn("z-[300] bg-[rgb(var(--bg-surface))] rounded-xl shadow-2xl border border-[rgb(var(--bd-default))] backdrop-blur-sm", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2", mode === 'range' ? 'w-[95vw] sm:w-auto sm:min-w-[580px] p-2' : 'w-[95vw] sm:w-auto sm:min-w-[280px] p-3', 'max-w-[calc(100vw-2rem)]'), side: "bottom", align: popoverAlign ?? (mode === 'range' ? 'end' : 'start'), sideOffset: 8, avoidCollisions: true, collisionPadding: 16, sticky: "always", onOpenAutoFocus: (e) => e.preventDefault(), onKeyDown: handleCalendarKeyDown, tabIndex: -1, onInteractOutside: (e) => {
                                 // Prevent closing when interacting with nested Radix portals (like Dropdowns)
                                 const target = e.target;
                                 if (target?.closest('[data-radix-popper-content-wrapper]')) {

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

@@ -6,3 +6,5 @@ export { AppShell, Page, Grid } from './app-shell.js';
 export type { AppShellProps, PageProps, GridProps } from './app-shell.js';
 export { FloatingActionButton } from './floating-action-button.js';
 export type { FABAction } from './floating-action-button.js';
+export { SidePanel } from './side-panel.js';
+export type { SidePanelProps, SidePanelCategory, SidePanelItem } from './side-panel.js';

package/dist/components/layout/index.js

@@ -4,3 +4,4 @@ export { DynamicSidebar } from './sidebar.js';
 export { Footer, CompactFooter } from './footer.js';
 export { AppShell, Page, Grid } from './app-shell.js';
 export { FloatingActionButton } from './floating-action-button.js';
+export { SidePanel } from './side-panel.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indas-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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",
@@ -64,6 +64,11 @@
       "import": "./dist/components/forms/index.js",
       "require": "./dist/cjs/components/forms/index.js"
     },
+    "./chat": {
+      "types": "./dist/components/chat/index.d.ts",
+      "import": "./dist/components/chat/index.js",
+      "require": "./dist/cjs/components/chat/index.js"
+    },
     "./providers": {
       "types": "./dist/providers.d.ts",
       "import": "./dist/providers.js",