indas-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,102 @@
+'use client';
+"use strict";
+/**
+ * Grid utility functions and helpers
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculatePaginationInfo = calculatePaginationInfo;
+exports.generatePageNumbers = generatePageNumbers;
+exports.debounce = debounce;
+exports.getRowId = getRowId;
+exports.formatNumber = formatNumber;
+exports.matchesSearch = matchesSearch;
+/**
+ * Calculate pagination info
+ */
+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)
+ */
+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
+ */
+function debounce(func, delay) {
+    let timeoutId;
+    return (...args) => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => func(...args), delay);
+    };
+}
+/**
+ * Get row ID safely
+ */
+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
+ */
+function formatNumber(num) {
+    return num.toLocaleString();
+}
+/**
+ * Check if value matches search term
+ */
+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/cjs/components/datagrid/utils/grid-types.js

@@ -0,0 +1,3 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/draft/AutoSaveIndicator.js

@@ -0,0 +1,70 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoSaveIndicator = AutoSaveIndicator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+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: (0, jsx_runtime_1.jsx)(lucide_react_1.Save, { className: "w-3.5 h-3.5 animate-pulse" }),
+                text: 'Saving...'
+            };
+        }
+        if (isDirty) {
+            return {
+                color: 'text-orange-600',
+                bg: 'bg-orange-100',
+                icon: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: "w-3.5 h-3.5" }),
+                text: 'Unsaved changes'
+            };
+        }
+        if (lastSaved) {
+            return {
+                color: 'text-green-600',
+                bg: 'bg-green-100',
+                icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "w-3.5 h-3.5" }),
+            text: 'Not saved yet'
+        };
+    };
+    const status = getStatus();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "Auto-save:" }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.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'}
+            ` }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))]", children: enabled ? 'ON' : 'OFF' })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 w-px bg-[rgb(var(--bd-default))]" }), (0, jsx_runtime_1.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, (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium", children: status.text })] })] }));
+}

package/dist/cjs/components/draft/DraftModal.js

@@ -0,0 +1,220 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DraftModal = DraftModal;
+const jsx_runtime_1 = require("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
+ */
+const react_1 = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const dropdown_1 = require("../forms/dropdown/index.js");
+const CurrencyContext_1 = require("../../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)' }
+];
+function DraftModal({ open, onClose, drafts, onLoad, onDelete, isLoading = false }) {
+    const { getCurrencyInfo, selectedCurrency } = (0, CurrencyContext_1.useCurrency)();
+    const currencySymbol = getCurrencyInfo(selectedCurrency)?.symbol || '';
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [deletingId, setDeletingId] = (0, react_1.useState)(null);
+    const [sortBy, setSortBy] = (0, react_1.useState)('date-desc');
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
+    /**
+     * Filter and sort drafts
+     */
+    const filteredAndSortedDrafts = (0, react_1.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 = (0, react_1.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_1.default.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 ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-[rgb(var(--bg-surface))] rounded-lg shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-3 border-b border-[rgb(var(--bd-default))] flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "w-5 h-5 text-[rgb(var(--color-primary))]" }), (0, jsx_runtime_1.jsx)("h2", { className: "text-base font-semibold text-[rgb(var(--fg-default))]", children: "Saved Drafts" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", drafts.length, ")"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[rgb(var(--fg-muted))]" }), (0, jsx_runtime_1.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              " })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 w-36", children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: SORT_OPTIONS, value: sortBy, onValueChange: (val) => setSortBy(val), size: "sm", autoWidth: true }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-5 h-5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-16", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("p", { className: "text-[rgb(var(--fg-muted))]", children: "Loading drafts..." })] }) })) : filteredAndSortedDrafts.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "w-16 h-16 text-[rgb(var(--fg-muted))] mb-4 opacity-50" }), (0, jsx_runtime_1.jsx)("p", { className: "text-lg font-medium text-[rgb(var(--fg-default))] mb-1", children: searchQuery ? 'No matching drafts' : 'No drafts saved yet' }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: searchQuery ? 'Try a different search term' : 'Start by clicking "Save Draft" button' })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: paginatedDrafts.map((draft) => {
+                            const progress = calculateProgress(draft);
+                            const preview = draft.previewData || {};
+                            return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", { className: "flex items-start gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-semibold text-[rgb(var(--fg-default))] truncate text-base", children: draft.draftName || 'Untitled Draft' }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mt-1 text-xs text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)("span", { children: formatRelativeTime(draft.lastSaved) }), (0, jsx_runtime_1.jsxs)("span", { className: "hidden group-hover:inline", children: ["\u2022 ", formatFullDate(draft.lastSaved)] }), draft.isAutoSave && ((0, jsx_runtime_1.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" }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity", children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { className: "w-4 h-4" }), "Load"] }), (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 rounded-full border-2 border-red-200 border-t-red-600 animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "w-4 h-4" })) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-x-6 gap-y-1 mt-2 text-sm", children: [preview.jobName && ((0, jsx_runtime_1.jsx)("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.jobName }, "job")), preview.clientName && ((0, jsx_runtime_1.jsx)("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.clientName }, "client")), preview.category && ((0, jsx_runtime_1.jsx)("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.category }, "category")), preview.totalCost !== undefined && preview.totalCost > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "font-medium text-[rgb(var(--color-primary))]", children: [currencySymbol, preview.totalCost.toLocaleString('en-IN')] }, "cost"))] }), progress > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-xs text-[rgb(var(--fg-muted))] mb-1", children: [(0, jsx_runtime_1.jsx)("span", { children: "Progress" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [progress, "%"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-1.5 bg-[rgb(var(--bg-muted))] rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-[rgb(var(--color-primary))] transition-all duration-500 rounded-full", style: { width: `${progress}%` } }) })] }))] }) }) }, draft.draftId));
+                        }) })) }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-[rgb(var(--fg-muted))]", children: filteredAndSortedDrafts.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.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 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "w-4 h-4" }) }), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.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));
+                                    }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "w-4 h-4" }) })] })), (0, jsx_runtime_1.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/cjs/components/forms/date-picker/CalendarView.js

@@ -0,0 +1,82 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarView = CalendarView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils.js");
+const ui_1 = require("../../ui/index.js");
+const shared_utils_1 = require("./shared-utils.js");
+/**
+ * Shared Calendar View Component
+ * Used by both DatePicker and DateTimePicker to render the calendar grid
+ */
+function CalendarView({ currentMonth, selectedDate, onDateClick, onMonthChange, isDateDisabled, isDateSelected, minDate, maxDate, showNavigation = true }) {
+    const defaultIsDateDisabled = React.useCallback((date) => {
+        if (minDate && date < minDate)
+            return true;
+        if (maxDate && date > maxDate)
+            return true;
+        return false;
+    }, [minDate, maxDate]);
+    const defaultIsDateSelected = React.useCallback((date) => {
+        if (!selectedDate)
+            return false;
+        return date.toDateString() === selectedDate.toDateString();
+    }, [selectedDate]);
+    const checkDisabled = isDateDisabled || defaultIsDateDisabled;
+    const checkSelected = isDateSelected || defaultIsDateSelected;
+    const renderCalendarDays = () => {
+        const daysInMonth = (0, shared_utils_1.getDaysInMonth)(currentMonth);
+        const firstDayOfMonth = (0, shared_utils_1.getFirstDayOfMonth)(currentMonth);
+        const days = [];
+        // Empty cells for days before month starts
+        for (let i = 0; i < firstDayOfMonth; i++) {
+            days.push((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8" }, `empty-${i}`));
+        }
+        // Days of the month
+        for (let day = 1; day <= daysInMonth; day++) {
+            const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
+            const isSelected = checkSelected(date);
+            const isDisabled = checkDisabled(date);
+            const isToday = date.toDateString() === new Date().toDateString();
+            days.push((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)('h-8 w-8 rounded-lg text-xs font-medium transition-all duration-200', 'text-[rgb(var(--fg-default))]', !isSelected && !isDisabled && 'hover:bg-[rgb(var(--bg-hover))] hover:shadow-sm', isSelected && 'bg-[rgb(var(--color-primary))] !text-white shadow-md', isToday && !isSelected && 'text-[rgb(var(--color-primary))] font-bold border border-[rgb(var(--color-primary))]', isDisabled && 'text-[rgb(var(--fg-subtle))] cursor-not-allowed hover:bg-transparent'), onClick: () => !isDisabled && onDateClick(date), disabled: isDisabled, children: day }, day));
+        }
+        return days;
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [showNavigation && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "ghost", size: "sm", onClick: () => onMonthChange('prev'), className: "h-7 w-7 p-0 hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: [shared_utils_1.MONTHS[currentMonth.getMonth()], " ", currentMonth.getFullYear()] }), (0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "ghost", size: "sm", onClick: () => onMonthChange('next'), className: "h-7 w-7 p-0 hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" }) })] })), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: shared_utils_1.WEEKDAYS.map(day => ((0, jsx_runtime_1.jsx)("div", { className: "h-7 w-8 flex items-center justify-center font-semibold text-[rgb(var(--fg-muted))] bg-[rgb(var(--bg-subtle))] rounded text-[10px]", children: day.charAt(0) }, day))) }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-7 gap-1", children: renderCalendarDays() })] }));
+}