indas-ui 0.0.1 → 0.1.1

package/dist/components/datagrid/utils/grid-helpers.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Grid utility functions and helpers
+ */
+/**
+ * Calculate pagination info
+ */
+export declare function calculatePaginationInfo(totalRows: number, pageIndex: number, pageSize: number): {
+    startRow: number;
+    endRow: number;
+    totalPages: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+};
+/**
+ * Generate page numbers for pagination display
+ * Shows: 1 ... 5 6 7 ... 20 (current page in middle)
+ */
+export declare function generatePageNumbers(currentPage: number, totalPages: number, maxVisible?: number): (number | 'ellipsis')[];
+/**
+ * Debounce function for search
+ */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void;
+/**
+ * Get row ID safely
+ */
+export declare function getRowId<TData>(row: TData, index: number, getRowIdFn?: (row: TData) => string): string;
+/**
+ * Format large numbers with commas
+ */
+export declare function formatNumber(num: number): string;
+/**
+ * Check if value matches search term
+ */
+export declare function matchesSearch(value: any, searchTerm: string): boolean;

package/dist/components/datagrid/utils/grid-helpers.js

@@ -0,0 +1,94 @@
+'use client';
+/**
+ * Grid utility functions and helpers
+ */
+/**
+ * Calculate pagination info
+ */
+export function calculatePaginationInfo(totalRows, pageIndex, pageSize) {
+    const totalPages = Math.ceil(totalRows / pageSize);
+    const startRow = pageIndex * pageSize + 1;
+    const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
+    return {
+        startRow,
+        endRow,
+        totalPages,
+        hasNextPage: pageIndex < totalPages - 1,
+        hasPreviousPage: pageIndex > 0,
+    };
+}
+/**
+ * Generate page numbers for pagination display
+ * Shows: 1 ... 5 6 7 ... 20 (current page in middle)
+ */
+export function generatePageNumbers(currentPage, totalPages, maxVisible = 7) {
+    if (totalPages <= maxVisible) {
+        return Array.from({ length: totalPages }, (_, i) => i);
+    }
+    const pages = [];
+    const leftEdge = 1;
+    const rightEdge = 1;
+    const aroundCurrent = 2;
+    // Always show first page
+    pages.push(0);
+    // Calculate range around current page
+    const rangeStart = Math.max(leftEdge, currentPage - aroundCurrent);
+    const rangeEnd = Math.min(totalPages - rightEdge - 1, currentPage + aroundCurrent);
+    // Add ellipsis after first page if needed
+    if (rangeStart > leftEdge) {
+        pages.push('ellipsis');
+    }
+    // Add pages around current
+    for (let i = rangeStart; i <= rangeEnd; i++) {
+        pages.push(i);
+    }
+    // Add ellipsis before last page if needed
+    if (rangeEnd < totalPages - rightEdge - 1) {
+        pages.push('ellipsis');
+    }
+    // Always show last page
+    if (totalPages > 1) {
+        pages.push(totalPages - 1);
+    }
+    return pages;
+}
+/**
+ * Debounce function for search
+ */
+export function debounce(func, delay) {
+    let timeoutId;
+    return (...args) => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => func(...args), delay);
+    };
+}
+/**
+ * Get row ID safely
+ */
+export function getRowId(row, index, getRowIdFn) {
+    if (getRowIdFn) {
+        return getRowIdFn(row);
+    }
+    if (typeof row === 'object' && row !== null && 'id' in row) {
+        return String(row.id);
+    }
+    return String(index);
+}
+/**
+ * Format large numbers with commas
+ */
+export function formatNumber(num) {
+    return num.toLocaleString();
+}
+/**
+ * Check if value matches search term
+ */
+export function matchesSearch(value, searchTerm) {
+    if (!searchTerm)
+        return true;
+    if (value == null)
+        return false;
+    const valueStr = String(value).toLowerCase();
+    const searchStr = searchTerm.toLowerCase();
+    return valueStr.includes(searchStr);
+}

package/dist/components/datagrid/utils/grid-types.d.ts

@@ -0,0 +1,157 @@
+import { ColumnDef } from '@tanstack/react-table';
+/**
+ * Main props interface for DataGrid component
+ */
+export interface DataGridProps<TData> {
+    data: TData[];
+    columns: ColumnDef<TData>[];
+    onRowClick?: (row: TData) => void;
+    onRowSelect?: (selectedRows: TData[]) => void;
+    onImport?: (data: TData[]) => void;
+    selectedRowIds?: string[];
+    getRowId?: (row: TData) => string;
+    getRowProps?: (row: TData) => {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    enableViewToggle?: boolean;
+    viewMode?: 'all' | 'selected';
+    onViewModeChange?: (mode: 'all' | 'selected') => void;
+    enableVirtualization?: boolean;
+    enableColumnResizing?: boolean;
+    enableColumnReordering?: boolean;
+    enableColumnFreezing?: boolean;
+    enableInlineEditing?: boolean;
+    enableGrouping?: boolean;
+    enableExport?: boolean;
+    enableImport?: boolean;
+    enableVisualization?: boolean;
+    enableStickyActions?: boolean;
+    enableRowSelection?: boolean;
+    enableSorting?: boolean;
+    enableSearch?: boolean;
+    enableFiltering?: boolean;
+    enableColumnVisibility?: boolean;
+    enablePagination?: boolean;
+    paginationPageSize?: number;
+    paginationPageSizeOptions?: number[];
+    circularCheckboxes?: boolean;
+    enableAutoResize?: boolean;
+    rowSelectionMode?: 'single' | 'multi';
+    enableRowClickSelection?: boolean;
+    enableCtrlClickMultiSelect?: boolean;
+    enableShiftClickRange?: boolean;
+    singleSelectionStyle?: 'radio' | 'highlight';
+    frozenColumns?: string[];
+    columnResizeMode?: 'onChange' | 'onEnd';
+    pageSize?: number;
+    stickyHeader?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    autoSize?: boolean;
+    minHeight?: number;
+    maxHeight?: number;
+    rowHeight?: number;
+    title?: string;
+    description?: string;
+    headerActions?: React.ReactNode;
+    preToggleActions?: React.ReactNode;
+    loading?: boolean;
+    hideHeader?: boolean;
+    mainColumns?: string;
+    enableBacchaSearch?: boolean;
+    searchType?: 'advanced' | 'new';
+    enableSummary?: boolean;
+    summaryConfig?: SummaryConfig<TData> | SummaryConfig<TData>[];
+}
+/**
+ * Summary aggregation types
+ */
+export type SummaryAggregationType = 'sum' | 'avg' | 'count' | 'min' | 'max' | 'custom';
+/**
+ * Summary configuration for a column
+ */
+export interface ColumnSummary<TData = any> {
+    type: SummaryAggregationType;
+    label?: string;
+    customFn?: (data: TData[]) => string | number;
+    format?: (value: number) => string;
+    className?: string;
+    customValue?: () => string | number;
+}
+/**
+ * Summary configuration for the entire grid
+ */
+export interface SummaryConfig<TData = any> {
+    columns: Record<string, ColumnSummary<TData>>;
+    position?: 'top' | 'bottom';
+    style?: React.CSSProperties;
+    className?: string;
+}
+/**
+ * Pagination state
+ */
+export interface PaginationState {
+    pageIndex: number;
+    pageSize: number;
+    pageCount: number;
+    totalRows: number;
+}
+/**
+ * Pagination handlers
+ */
+export interface PaginationHandlers {
+    goToFirstPage: () => void;
+    goToPreviousPage: () => void;
+    goToNextPage: () => void;
+    goToLastPage: () => void;
+    goToPage: (page: number) => void;
+    setPageSize: (size: number) => void;
+    canPreviousPage: boolean;
+    canNextPage: boolean;
+}
+/**
+ * Selection handlers
+ */
+export interface SelectionHandlers<TData> {
+    toggleRowSelection: (rowId: string) => void;
+    toggleAllRowsSelection: (checked: boolean) => void;
+    isRowSelected: (rowId: string) => boolean;
+    isAllRowsSelected: boolean;
+    isSomeRowsSelected: boolean;
+    selectedRows: TData[];
+    selectedRowCount: number;
+}
+/**
+ * Column handlers
+ */
+export interface ColumnHandlers {
+    toggleColumnVisibility: (columnId: string) => void;
+    resetColumnOrder: () => void;
+    resetColumnSizing: () => void;
+    autoSizeAllColumns: () => void;
+    freezeColumn: (columnId: string) => void;
+    unfreezeColumn: (columnId: string) => void;
+}
+/**
+ * Search handlers
+ */
+export interface SearchHandlers {
+    globalSearch: string;
+    setGlobalSearch: (value: string) => void;
+    columnSearch: Record<string, string>;
+    setColumnSearch: (columnId: string, value: string) => void;
+    clearSearch: () => void;
+    clearColumnSearch: (columnId: string) => void;
+}
+/**
+ * Context menu state
+ */
+export interface ContextMenuState {
+    column: any | null;
+    isVisible: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+}

package/dist/components/datagrid/utils/grid-types.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/dist/components/draft/AutoSaveIndicator.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Auto-Save Indicator Component
+ *
+ * Displays save status in the footer:
+ * - "Saved 2 mins ago" (green)
+ * - "Saving..." (blue)
+ * - "Unsaved changes" (orange)
+ * - "Auto-save: ON/OFF" toggle
+ *
+ * Clicking opens Draft Manager modal
+ */
+import React from 'react';
+interface AutoSaveIndicatorProps {
+    /** Whether auto-save is enabled */
+    enabled: boolean;
+    /** Last saved timestamp */
+    lastSaved: Date | null;
+    /** Whether there are unsaved changes */
+    isDirty: boolean;
+    /** Whether currently saving */
+    isSaving: boolean;
+    /** Callback when clicked (opens draft manager) */
+    onOpenDraftManager?: () => void;
+    /** Callback to toggle auto-save */
+    onToggleAutoSave?: (enabled: boolean) => void;
+}
+export declare function AutoSaveIndicator({ enabled, lastSaved, isDirty, isSaving, onOpenDraftManager, onToggleAutoSave }: AutoSaveIndicatorProps): React.JSX.Element;
+export {};

package/dist/components/draft/AutoSaveIndicator.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Clock, Save, AlertCircle } from 'lucide-react';
+export function AutoSaveIndicator({ enabled, lastSaved, isDirty, isSaving, onOpenDraftManager, onToggleAutoSave }) {
+    /**
+     * Format relative time (e.g., "2 mins ago")
+     */
+    const formatRelativeTime = (date) => {
+        const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
+        if (seconds < 60)
+            return 'just now';
+        const minutes = Math.floor(seconds / 60);
+        if (minutes < 60)
+            return `${minutes} min${minutes > 1 ? 's' : ''} ago`;
+        const hours = Math.floor(minutes / 60);
+        if (hours < 24)
+            return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+        const days = Math.floor(hours / 24);
+        return `${days} day${days > 1 ? 's' : ''} ago`;
+    };
+    /**
+     * Get status color and icon
+     */
+    const getStatus = () => {
+        if (isSaving) {
+            return {
+                color: 'text-[rgb(var(--color-primary))]',
+                bg: 'bg-[rgb(var(--color-primary)_/_0.1)]',
+                icon: _jsx(Save, { className: "w-3.5 h-3.5 animate-pulse" }),
+                text: 'Saving...'
+            };
+        }
+        if (isDirty) {
+            return {
+                color: 'text-orange-600',
+                bg: 'bg-orange-100',
+                icon: _jsx(AlertCircle, { className: "w-3.5 h-3.5" }),
+                text: 'Unsaved changes'
+            };
+        }
+        if (lastSaved) {
+            return {
+                color: 'text-green-600',
+                bg: 'bg-green-100',
+                icon: _jsx(Save, { className: "w-3.5 h-3.5" }),
+                text: `Saved ${formatRelativeTime(lastSaved)}`
+            };
+        }
+        return {
+            color: 'text-[rgb(var(--fg-muted))]',
+            bg: 'bg-[rgb(var(--bg-muted))]',
+            icon: _jsx(Clock, { className: "w-3.5 h-3.5" }),
+            text: 'Not saved yet'
+        };
+    };
+    const status = getStatus();
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "Auto-save:" }), _jsx("button", { onClick: () => onToggleAutoSave?.(!enabled), className: `
+            relative inline-flex h-5 w-9 items-center rounded-full transition-colors
+            ${enabled ? 'bg-[rgb(var(--color-primary))]' : 'bg-[rgb(var(--bg-muted))]'}
+          `, title: enabled ? 'Disable auto-save' : 'Enable auto-save', children: _jsx("span", { className: `
+              inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform
+              ${enabled ? 'translate-x-5' : 'translate-x-1'}
+            ` }) }), _jsx("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))]", children: enabled ? 'ON' : 'OFF' })] }), _jsx("div", { className: "h-4 w-px bg-[rgb(var(--bd-default))]" }), _jsxs("button", { onClick: onOpenDraftManager, className: `
+          flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors
+          ${status.bg} ${status.color} hover:opacity-80
+        `, title: "Click to manage drafts", children: [status.icon, _jsx("span", { className: "text-xs font-medium", children: status.text })] })] }));
+}

package/dist/components/draft/DraftModal.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Draft Modal
+ *
+ * Modern, useful modal for managing saved drafts with:
+ * - Draft name, date, client, job name, category
+ * - Progress indicator
+ * - Search and sort
+ * - Quick load/delete actions
+ */
+import React from 'react';
+import type { DraftMetadata } from '../../types/draft.js';
+interface DraftModalProps {
+    /** Whether modal is open */
+    open: boolean;
+    /** Close modal callback */
+    onClose: () => void;
+    /** Array of available drafts */
+    drafts: DraftMetadata[];
+    /** Callback when draft is loaded */
+    onLoad: (draftId: number) => Promise<void>;
+    /** Callback when draft is deleted */
+    onDelete: (draftId: number) => Promise<void>;
+    /** Whether drafts are being loaded */
+    isLoading?: boolean;
+}
+export declare function DraftModal({ open, onClose, drafts, onLoad, onDelete, isLoading }: DraftModalProps): React.JSX.Element;
+export {};

package/dist/components/draft/DraftModal.js

@@ -0,0 +1,184 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Draft Modal
+ *
+ * Modern, useful modal for managing saved drafts with:
+ * - Draft name, date, client, job name, category
+ * - Progress indicator
+ * - Search and sort
+ * - Quick load/delete actions
+ */
+import React, { useState, useMemo } from 'react';
+import { FileText, Trash2, Download, Search, X, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Dropdown } from '../forms/dropdown/index.js';
+import { useCurrency } from '../../contexts/CurrencyContext.js';
+const PAGE_SIZE = 15;
+const SORT_OPTIONS = [
+    { value: 'date-desc', label: 'Newest first' },
+    { value: 'date-asc', label: 'Oldest first' },
+    { value: 'name-asc', label: 'Name (A-Z)' },
+    { value: 'name-desc', label: 'Name (Z-A)' }
+];
+export function DraftModal({ open, onClose, drafts, onLoad, onDelete, isLoading = false }) {
+    const { getCurrencyInfo, selectedCurrency } = useCurrency();
+    const currencySymbol = getCurrencyInfo(selectedCurrency)?.symbol || '';
+    const [searchQuery, setSearchQuery] = useState('');
+    const [deletingId, setDeletingId] = useState(null);
+    const [sortBy, setSortBy] = useState('date-desc');
+    const [currentPage, setCurrentPage] = useState(1);
+    /**
+     * Filter and sort drafts
+     */
+    const filteredAndSortedDrafts = useMemo(() => {
+        // If no search query, return all drafts
+        if (!searchQuery.trim()) {
+            const sorted = [...drafts];
+            sorted.sort((a, b) => {
+                switch (sortBy) {
+                    case 'date-desc':
+                        return new Date(b.lastSaved).getTime() - new Date(a.lastSaved).getTime();
+                    case 'date-asc':
+                        return new Date(a.lastSaved).getTime() - new Date(b.lastSaved).getTime();
+                    case 'name-asc':
+                        return (a.draftName || '').localeCompare(b.draftName || '');
+                    case 'name-desc':
+                        return (b.draftName || '').localeCompare(a.draftName || '');
+                    default:
+                        return 0;
+                }
+            });
+            return sorted;
+        }
+        // Filter by search query
+        let filtered = drafts.filter((draft) => {
+            const searchLower = searchQuery.toLowerCase();
+            return ((draft.draftName && draft.draftName.toLowerCase().includes(searchLower)) ||
+                (draft.previewData?.jobName && draft.previewData.jobName.toLowerCase().includes(searchLower)) ||
+                (draft.previewData?.clientName && draft.previewData.clientName.toLowerCase().includes(searchLower)) ||
+                (draft.previewData?.category && draft.previewData.category.toLowerCase().includes(searchLower)));
+        });
+        // Sort
+        filtered.sort((a, b) => {
+            switch (sortBy) {
+                case 'date-desc':
+                    return new Date(b.lastSaved).getTime() - new Date(a.lastSaved).getTime();
+                case 'date-asc':
+                    return new Date(a.lastSaved).getTime() - new Date(b.lastSaved).getTime();
+                case 'name-asc':
+                    return (a.draftName || '').localeCompare(b.draftName || '');
+                case 'name-desc':
+                    return (b.draftName || '').localeCompare(a.draftName || '');
+                default:
+                    return 0;
+            }
+        });
+        return filtered;
+    }, [drafts, searchQuery, sortBy]);
+    // Pagination
+    const totalPages = Math.ceil(filteredAndSortedDrafts.length / PAGE_SIZE);
+    const paginatedDrafts = useMemo(() => {
+        const start = (currentPage - 1) * PAGE_SIZE;
+        return filteredAndSortedDrafts.slice(start, start + PAGE_SIZE);
+    }, [filteredAndSortedDrafts, currentPage]);
+    // Reset to page 1 when search or sort changes
+    React.useEffect(() => {
+        setCurrentPage(1);
+    }, [searchQuery, sortBy]);
+    /**
+     * Format relative time
+     */
+    const formatRelativeTime = (dateStr) => {
+        const date = new Date(dateStr);
+        const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
+        if (seconds < 60)
+            return 'just now';
+        const minutes = Math.floor(seconds / 60);
+        if (minutes < 60)
+            return `${minutes} min${minutes > 1 ? 's' : ''} ago`;
+        const hours = Math.floor(minutes / 60);
+        if (hours < 24)
+            return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+        const days = Math.floor(hours / 24);
+        if (days < 7)
+            return `${days} day${days > 1 ? 's' : ''} ago`;
+        return new Date(dateStr).toLocaleDateString();
+    };
+    /**
+     * Format full date
+     */
+    const formatFullDate = (dateStr) => {
+        return new Date(dateStr).toLocaleString('en-IN', {
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    };
+    /**
+     * Calculate draft progress (0-100)
+     * Based on how many fields are filled
+     */
+    const calculateProgress = (draft) => {
+        const preview = draft.previewData;
+        if (!preview)
+            return 0;
+        const fields = [
+            preview.jobName,
+            preview.clientName,
+            preview.category,
+            preview.quoteNumber,
+            preview.totalCost
+        ];
+        const filledFields = fields.filter(f => f !== undefined && f !== null && f !== '').length;
+        return Math.round((filledFields / fields.length) * 100);
+    };
+    /**
+     * Handle load draft
+     */
+    const handleLoad = async (draftId) => {
+        await onLoad(draftId);
+        onClose();
+    };
+    /**
+     * Handle delete draft
+     */
+    const handleDelete = async (draftId) => {
+        setDeletingId(draftId);
+        try {
+            await onDelete(draftId);
+        }
+        finally {
+            setDeletingId(null);
+        }
+    };
+    // Early return after all hooks to comply with Rules of Hooks
+    if (!open)
+        return null;
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: _jsxs("div", { className: "bg-[rgb(var(--bg-surface))] rounded-lg shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col", children: [_jsxs("div", { className: "px-6 py-3 border-b border-[rgb(var(--bd-default))] flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx(FileText, { className: "w-5 h-5 text-[rgb(var(--color-primary))]" }), _jsx("h2", { className: "text-base font-semibold text-[rgb(var(--fg-default))]", children: "Saved Drafts" }), _jsxs("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", drafts.length, ")"] })] }), _jsxs("div", { className: "relative flex-1", children: [_jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[rgb(var(--fg-muted))]" }), _jsx("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "\n                w-full pl-9 pr-3 py-1.5 rounded-lg text-sm\n                bg-[rgb(var(--bg-default))]\n                border border-[rgb(var(--bd-default))]\n                text-[rgb(var(--fg-default))]\n                placeholder:text-[rgb(var(--fg-muted))]\n                focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))]\n              " })] }), _jsx("div", { className: "flex-shrink-0 w-36", children: _jsx(Dropdown, { options: SORT_OPTIONS, value: sortBy, onValueChange: (val) => setSortBy(val), size: "sm", autoWidth: true }) }), _jsx("button", { onClick: onClose, className: "p-1.5 rounded-lg hover:bg-[rgb(var(--bg-muted))] text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] transition-colors flex-shrink-0", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-16", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "w-12 h-12 rounded-full border-4 border-[rgb(var(--color-primary)_/_0.2)] border-t-[rgb(var(--color-primary))] animate-spin mx-auto mb-3" }), _jsx("p", { className: "text-[rgb(var(--fg-muted))]", children: "Loading drafts..." })] }) })) : filteredAndSortedDrafts.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [_jsx(FileText, { className: "w-16 h-16 text-[rgb(var(--fg-muted))] mb-4 opacity-50" }), _jsx("p", { className: "text-lg font-medium text-[rgb(var(--fg-default))] mb-1", children: searchQuery ? 'No matching drafts' : 'No drafts saved yet' }), _jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: searchQuery ? 'Try a different search term' : 'Start by clicking "Save Draft" button' })] })) : (_jsx("div", { className: "space-y-3", children: paginatedDrafts.map((draft) => {
+                            const progress = calculateProgress(draft);
+                            const preview = draft.previewData || {};
+                            return (_jsx("div", { className: "\n                      group relative p-3 rounded-lg\n                      bg-[rgb(var(--bg-default))]\n                      border border-[rgb(var(--bd-default))]\n                      hover:border-[rgb(var(--color-primary))]\n                      hover:shadow-lg\n                      transition-all duration-200\n                    ", children: _jsx("div", { className: "flex items-start gap-4", children: _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-[rgb(var(--fg-default))] truncate text-base", children: draft.draftName || 'Untitled Draft' }), _jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-[rgb(var(--fg-muted))]", children: [_jsx("span", { children: formatRelativeTime(draft.lastSaved) }), _jsxs("span", { className: "hidden group-hover:inline", children: ["\u2022 ", formatFullDate(draft.lastSaved)] }), draft.isAutoSave && (_jsx("span", { className: "text-[10px] px-2 py-0.5 rounded-full bg-[rgb(var(--color-primary)_/_0.1)] text-[rgb(var(--color-primary))] font-medium", children: "AUTO-SAVE" }))] })] }), _jsxs("div", { className: "flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity", children: [_jsxs("button", { onClick: () => handleLoad(draft.draftId), className: "\n                                px-4 py-2 rounded-lg text-sm font-medium\n                                bg-[rgb(var(--color-primary))]\n                                text-white\n                                hover:opacity-90\n                                transition-opacity\n                                flex items-center gap-2\n                              ", children: [_jsx(Download, { className: "w-4 h-4" }), "Load"] }), _jsx("button", { onClick: () => handleDelete(draft.draftId), disabled: deletingId === draft.draftId, className: "\n                                p-2 rounded-lg\n                                text-[rgb(var(--fg-muted))]\n                                hover:text-red-600\n                                hover:bg-red-50\n                                transition-colors\n                                disabled:opacity-50\n                              ", title: "Delete draft", children: deletingId === draft.draftId ? (_jsx("div", { className: "w-4 h-4 rounded-full border-2 border-red-200 border-t-red-600 animate-spin" })) : (_jsx(Trash2, { className: "w-4 h-4" })) })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-x-6 gap-y-1 mt-2 text-sm", children: [preview.jobName && (_jsx("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.jobName }, "job")), preview.clientName && (_jsx("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.clientName }, "client")), preview.category && (_jsx("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.category }, "category")), preview.totalCost !== undefined && preview.totalCost > 0 && (_jsxs("div", { className: "font-medium text-[rgb(var(--color-primary))]", children: [currencySymbol, preview.totalCost.toLocaleString('en-IN')] }, "cost"))] }), progress > 0 && (_jsxs("div", { className: "mt-2", children: [_jsxs("div", { className: "flex items-center justify-between text-xs text-[rgb(var(--fg-muted))] mb-1", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { className: "font-medium", children: [progress, "%"] })] }), _jsx("div", { className: "h-1.5 bg-[rgb(var(--bg-muted))] rounded-full overflow-hidden", children: _jsx("div", { className: "h-full bg-[rgb(var(--color-primary))] transition-all duration-500 rounded-full", style: { width: `${progress}%` } }) })] }))] }) }) }, draft.draftId));
+                        }) })) }), _jsxs("div", { className: "px-6 py-4 border-t border-[rgb(var(--bd-default))] flex justify-between items-center bg-[rgb(var(--bg-muted)_/_0.3)]", children: [_jsx("div", { className: "text-sm text-[rgb(var(--fg-muted))]", children: filteredAndSortedDrafts.length > 0 ? (_jsxs(_Fragment, { children: ["Showing ", ((currentPage - 1) * PAGE_SIZE) + 1, "-", Math.min(currentPage * PAGE_SIZE, filteredAndSortedDrafts.length), " of ", filteredAndSortedDrafts.length, filteredAndSortedDrafts.length !== drafts.length && ` (filtered from ${drafts.length})`] })) : (`0 of ${drafts.length} drafts`) }), totalPages > 1 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: () => setCurrentPage(p => Math.max(1, p - 1)), disabled: currentPage === 1, className: "p-1.5 rounded text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-default))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors", children: _jsx(ChevronLeft, { className: "w-4 h-4" }) }), _jsx("div", { className: "flex items-center gap-1", children: Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                                        let pageNum;
+                                        if (totalPages <= 5) {
+                                            pageNum = i + 1;
+                                        }
+                                        else if (currentPage <= 3) {
+                                            pageNum = i + 1;
+                                        }
+                                        else if (currentPage >= totalPages - 2) {
+                                            pageNum = totalPages - 4 + i;
+                                        }
+                                        else {
+                                            pageNum = currentPage - 2 + i;
+                                        }
+                                        return (_jsx("button", { onClick: () => setCurrentPage(pageNum), className: `
+                        w-8 h-8 rounded text-sm font-medium transition-colors
+                        ${currentPage === pageNum
+                                                ? 'bg-[rgb(var(--color-primary))] text-white'
+                                                : 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-default))]'}
+                      `, children: pageNum }, pageNum));
+                                    }) }), _jsx("button", { onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), disabled: currentPage === totalPages, className: "p-1.5 rounded text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-default))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors", children: _jsx(ChevronRight, { className: "w-4 h-4" }) })] })), _jsx("button", { onClick: onClose, className: "\n              px-5 py-2 rounded-lg text-sm font-medium\n              bg-[rgb(var(--bg-default))]\n              text-[rgb(var(--fg-default))]\n              border border-[rgb(var(--bd-default))]\n              hover:bg-[rgb(var(--bg-muted))]\n              transition-colors\n            ", children: "Close" })] })] }) }));
+}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface CalendarViewProps {
+    currentMonth: Date;
+    selectedDate?: Date | null;
+    onDateClick: (date: Date) => void;
+    onMonthChange: (direction: 'prev' | 'next') => void;
+    isDateDisabled?: (date: Date) => boolean;
+    isDateSelected?: (date: Date) => boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    showNavigation?: boolean;
+}
+/**
+ * Shared Calendar View Component
+ * Used by both DatePicker and DateTimePicker to render the calendar grid
+ */
+export declare function CalendarView({ currentMonth, selectedDate, onDateClick, onMonthChange, isDateDisabled, isDateSelected, minDate, maxDate, showNavigation }: CalendarViewProps): React.JSX.Element;