indas-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,6 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileAttachment = void 0;
+var FileAttachment_1 = require("./FileAttachment.js");
+Object.defineProperty(exports, "FileAttachment", { enumerable: true, get: function () { return FileAttachment_1.FileAttachment; } });

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

@@ -0,0 +1,16 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnifiedCurrencyDropdown = exports.FileAttachment = exports.QuantityInputPopup = exports.DateTimePicker = exports.DatePicker = exports.Dropdown = void 0;
+// Form controls entry: `import { DatePicker } from 'indas-ui/forms'`
+var dropdown_1 = require("./dropdown/index.js");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return dropdown_1.Dropdown; } });
+var date_picker_1 = require("./date-picker/index.js");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return date_picker_1.DatePicker; } });
+Object.defineProperty(exports, "DateTimePicker", { enumerable: true, get: function () { return date_picker_1.DateTimePicker; } });
+var quantity_input_popup_1 = require("./quantity-input-popup.js");
+Object.defineProperty(exports, "QuantityInputPopup", { enumerable: true, get: function () { return quantity_input_popup_1.QuantityInputPopup; } });
+var FileAttachment_1 = require("./file-attachment/FileAttachment.js");
+Object.defineProperty(exports, "FileAttachment", { enumerable: true, get: function () { return FileAttachment_1.FileAttachment; } });
+var unified_currency_dropdown_1 = require("./unified-currency-dropdown.js");
+Object.defineProperty(exports, "UnifiedCurrencyDropdown", { enumerable: true, get: function () { return unified_currency_dropdown_1.UnifiedCurrencyDropdown; } });

package/dist/cjs/components/forms/quantity-input-popup.js

@@ -0,0 +1,135 @@
+'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.QuantityInputPopup = QuantityInputPopup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const ui_1 = require("../ui/index.js");
+const ui_2 = require("../ui/index.js");
+const utils_1 = require("../../lib/utils.js");
+const lucide_react_1 = require("lucide-react");
+function QuantityInputPopup({ isOpen, onClose, onConfirm, triggerRef, className }) {
+    const [quantity, setQuantity] = React.useState('1000');
+    const [error, setError] = React.useState('');
+    const [position, setPosition] = React.useState({ top: 0, left: 0 });
+    const popupRef = React.useRef(null);
+    // Calculate position relative to trigger button
+    React.useEffect(() => {
+        if (isOpen && triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            setPosition({
+                top: rect.bottom + window.scrollY + 4, // 4px gap below button
+                left: rect.left + window.scrollX
+            });
+        }
+    }, [isOpen, triggerRef]);
+    // Handle clicks outside popup
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (popupRef.current && !popupRef.current.contains(event.target) &&
+                triggerRef.current && !triggerRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [isOpen, onClose, triggerRef]);
+    // Handle Enter and Escape keys
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!isOpen)
+                return;
+            if (event.key === 'Enter') {
+                event.preventDefault(); // Prevent form submission
+                handleConfirm();
+            }
+            else if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, onClose, quantity, error]); // Added quantity and error to dependencies
+    // Validate quantity input
+    const validateQuantity = (value) => {
+        if (!value.trim()) {
+            return 'Quantity is required';
+        }
+        const num = parseFloat(value);
+        if (isNaN(num)) {
+            return 'Please enter a valid number';
+        }
+        if (num <= 0) {
+            return 'Quantity must be greater than 0';
+        }
+        if (num > 1000000) {
+            return 'Quantity cannot exceed 1,000,000';
+        }
+        return '';
+    };
+    const handleQuantityChange = (value) => {
+        // Allow only numbers, decimal point, and commas
+        const cleanValue = value.replace(/[^0-9.,]/g, '');
+        setQuantity(cleanValue);
+        const validationError = validateQuantity(cleanValue);
+        setError(validationError);
+    };
+    const handleConfirm = () => {
+        const validationError = validateQuantity(quantity);
+        if (validationError) {
+            setError(validationError);
+            return;
+        }
+        const numericQuantity = parseFloat(quantity.replace(/,/g, ''));
+        onConfirm(numericQuantity);
+        setQuantity('1000'); // Reset to default
+        setError('');
+        onClose();
+    };
+    const handleCancel = () => {
+        setQuantity('1000'); // Reset to default
+        setError('');
+        onClose();
+    };
+    if (!isOpen)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-40" }), (0, jsx_runtime_1.jsx)("div", { ref: popupRef, className: (0, utils_1.cn)("fixed z-50 bg-white border border-gray-300 rounded-md shadow-lg p-3 min-w-[200px]", className), style: {
+                    top: position.top,
+                    left: position.left
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-gray-900", children: "Add Quantity Column" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1", children: [(0, jsx_runtime_1.jsx)(ui_2.Input, { type: "text", value: quantity, onChange: (e) => handleQuantityChange(e.target.value), placeholder: "Enter quantity", className: (0, utils_1.cn)("h-8 text-sm", error && "border-red-500 focus:ring-red-500"), autoFocus: true }), error && ((0, jsx_runtime_1.jsx)("div", { className: "text-xs text-red-500", children: error }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsxs)(ui_1.Button, { size: "sm", onClick: handleConfirm, disabled: !!error || !quantity.trim(), className: "h-7 px-3 text-xs", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-3 w-3 mr-1" }), "Add"] }), (0, jsx_runtime_1.jsxs)(ui_1.Button, { variant: "outline", size: "sm", onClick: handleCancel, className: "h-7 px-3 text-xs", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-3 w-3 mr-1" }), "Cancel"] })] })] }) })] }));
+}

package/dist/cjs/components/forms/remark-input/RemarkInput.js

@@ -0,0 +1,263 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commitRemarkToTrail = commitRemarkToTrail;
+exports.RemarkTrail = RemarkTrail;
+exports.RemarkInput = RemarkInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const components_1 = require("../../index.js");
+const LanguageContext_1 = require("../../../contexts/LanguageContext.js");
+const utils_1 = require("../../../lib/utils.js");
+const remarks_1 = require("../../../lib/api/activity/remarks/index.js");
+const ui_1 = require("../../ui/index.js");
+// Commits the form's Remark field to the shared trail — the counterpart to the
+// "Current" preview entry the trail shows while the remark is still unsaved.
+// Call it after the host form saves successfully; `previous` is the remark as it
+// was loaded, so an unchanged remark is not re-posted on every save.
+async function commitRemarkToTrail(args) {
+    const text = (args.text || '').trim();
+    const previous = (args.previous || '').trim();
+    const hasDoc = args.documentId !== null && args.documentId !== undefined && args.documentId !== '' && Number(args.documentId) !== 0;
+    if (!text || text === previous || !hasDoc)
+        return { success: true, skipped: true };
+    return remarks_1.RemarkIntelligenceAPI.saveRemarkData({
+        Module: args.module,
+        DocumentID: args.documentId,
+        DocumentName: args.documentName,
+        DocumentNo: args.documentNo,
+        ActionUrl: args.actionUrl,
+        stage: args.stage,
+        status: args.status || '',
+        text,
+    }, args.session);
+}
+// ── Trail (timeline list) ───────────────────────────────────────────────────
+// Timeline-shaped placeholder shown while the trail is still loading and no
+// remarks are available yet.
+function RemarkTrailSkeleton() {
+    return ((0, jsx_runtime_1.jsx)("ul", { className: "space-y-3", "aria-hidden": true, children: Array.from({ length: 3 }).map((_, i) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex gap-2.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Skeleton, { width: "1.5rem", height: "1.5rem", variant: "circular", className: "shrink-0" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 space-y-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Skeleton, { width: "30%", height: "0.75rem" }), (0, jsx_runtime_1.jsx)(ui_1.Skeleton, { width: i % 2 === 0 ? '85%' : '65%', height: "0.85rem" })] })] }, i))) }));
+}
+// The last entry is editable/deletable only if authored by the caller and < 2 hours old.
+function canMutate(entry, currentUserId) {
+    if (!entry || !currentUserId)
+        return false;
+    if (Number(entry.by) !== Number(currentUserId))
+        return false;
+    if (!entry.at)
+        return false;
+    const at = new Date(entry.at);
+    if (isNaN(at.getTime()))
+        return false;
+    return Date.now() - at.getTime() < 2 * 60 * 60 * 1000;
+}
+// Relative time like "2h ago", "3 days ago"; falls back to a date for old entries.
+function formatWhen(at) {
+    if (!at)
+        return '';
+    const d = new Date(at);
+    if (isNaN(d.getTime()))
+        return at;
+    const diff = Date.now() - d.getTime();
+    const min = Math.floor(diff / 60000);
+    if (min < 1)
+        return 'just now';
+    if (min < 60)
+        return `${min}m ago`;
+    const hr = Math.floor(min / 60);
+    if (hr < 24)
+        return `${hr}h ago`;
+    const day = Math.floor(hr / 24);
+    if (day < 7)
+        return `${day}d ago`;
+    return d.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: '2-digit' });
+}
+// Neutral stage chip — no per-stage colors.
+function stageChip(_stage) {
+    return 'bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))]';
+}
+function RemarkTrail({ remarks, onAdd, canAdd = true, loading = false, onClose, documentNo, currentUserId, onEdit, onDelete, onUploadFiles, hideHeader = false, emptyTitle, emptyHint, className }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const [text, setText] = (0, react_1.useState)('');
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    // Inline edit state for the (only-editable) last entry.
+    const [editingSeq, setEditingSeq] = (0, react_1.useState)(null);
+    const [editText, setEditText] = (0, react_1.useState)('');
+    // Files attached to the note being composed (uploaded on pick, sent on add).
+    const [pendingFiles, setPendingFiles] = (0, react_1.useState)([]);
+    const [uploading, setUploading] = (0, react_1.useState)(false);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const lastSeq = remarks.length ? remarks[remarks.length - 1].seq : -1;
+    const handlePickFiles = async (e) => {
+        const picked = Array.from(e.target.files || []);
+        e.target.value = ''; // allow re-picking the same file
+        if (!picked.length || !onUploadFiles)
+            return;
+        setUploading(true);
+        try {
+            const uploaded = await onUploadFiles(picked);
+            if (uploaded?.length)
+                setPendingFiles(prev => [...prev, ...uploaded]);
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    const handleAdd = async () => {
+        const value = text.trim();
+        // A note is valid with text, files, or both.
+        if ((!value && pendingFiles.length === 0) || !onAdd)
+            return;
+        setSaving(true);
+        try {
+            await onAdd(value, pendingFiles);
+            setText('');
+            setPendingFiles([]);
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const startEdit = (r) => { setEditingSeq(r.seq); setEditText(r.text); };
+    const commitEdit = async () => {
+        const value = editText.trim();
+        if (!value || editingSeq == null || !onEdit) {
+            setEditingSeq(null);
+            return;
+        }
+        await onEdit(editingSeq, value);
+        setEditingSeq(null);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('rounded-lg border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] overflow-hidden flex flex-col', className), children: [!hideHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 px-3 py-2 bg-[rgb(var(--bg-subtle))] border-b border-[rgb(var(--bd-subtle))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { className: "h-3.5 w-3.5 text-[rgb(var(--fg-muted))]" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-[rgb(var(--fg-muted))]", children: t('Remarks') }), remarks.length > 0 && (0, jsx_runtime_1.jsxs)("span", { className: "text-[11px] text-[rgb(var(--fg-subtle))]", children: ["(", remarks.length, ")"] }), documentNo && (0, jsx_runtime_1.jsxs)("span", { className: "text-[11px] text-[rgb(var(--fg-subtle))]", children: ["\u00B7 ", documentNo] }), onClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, title: t('Close'), className: "ml-auto p-0.5 rounded text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-3.5 w-3.5" }) }))] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-auto px-3 py-2", children: remarks.length === 0 ? (loading ? ((0, jsx_runtime_1.jsx)(RemarkTrailSkeleton, {})) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center gap-1.5 py-8 text-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { className: "h-6 w-6 text-[rgb(var(--fg-subtle))]" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-[rgb(var(--fg-muted))]", children: emptyTitle || t('No remarks yet') }), emptyHint && (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-subtle))]", children: emptyHint })] }))) : ((0, jsx_runtime_1.jsx)("ul", { className: "space-y-2.5", children: remarks.map((r) => {
+                        const mutable = r.seq === lastSeq && canMutate(r, currentUserId) && (!!onEdit || !!onDelete);
+                        const isEditing = editingSeq === r.seq;
+                        return ((0, jsx_runtime_1.jsxs)("li", { className: "group relative text-xs", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 flex-wrap", children: [r.byName && r.byName.trim() && ((0, jsx_runtime_1.jsx)("span", { className: "font-semibold text-[rgb(var(--fg-default))]", children: r.byName })), (r.stage || r.status) && (() => {
+                                            const stageLabel = t(r.stage || 'General');
+                                            // Don't repeat the stage chip when it just echoes the author name.
+                                            const dup = r.byName && r.byName.trim().toLowerCase() === (r.stage || '').trim().toLowerCase();
+                                            if (dup && !r.status)
+                                                return null;
+                                            return ((0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.cn)('rounded-full px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-wide', stageChip(r.stage)), children: [dup ? '' : stageLabel, r.status ? `${dup ? '' : ' · '}${t(r.status)}` : ''] }));
+                                        })(), r.at && (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-subtle))]", children: formatWhen(r.at) }), r.edited && (0, jsx_runtime_1.jsxs)("span", { className: "text-[10px] italic text-[rgb(var(--fg-subtle))]", children: ["(", t('edited'), ")"] }), mutable && !isEditing && ((0, jsx_runtime_1.jsxs)("span", { className: "ml-auto inline-flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity", children: [onEdit && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => startEdit(r), title: t('Edit'), className: "p-0.5 rounded text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { className: "h-3 w-3" }) })), onDelete && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onDelete(r.seq), title: t('Delete'), className: "p-0.5 rounded text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-error))]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "h-3 w-3" }) }))] }))] }), isEditing ? ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1 flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("input", { value: editText, onChange: (e) => setEditText(e.target.value), onKeyDown: (e) => { if (e.key === 'Enter') {
+                                                e.preventDefault();
+                                                commitEdit();
+                                            } if (e.key === 'Escape')
+                                                setEditingSeq(null); }, autoFocus: true, className: "flex-1 text-xs rounded border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] px-2 py-1 text-[rgb(var(--fg-default))] focus:outline-none focus:ring-1 focus:ring-[rgb(var(--color-primary))]" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: commitEdit, title: t('Save'), className: "p-1 rounded bg-[rgb(var(--color-primary))] text-white hover:opacity-90", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-3 w-3" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setEditingSeq(null), title: t('Cancel'), className: "p-1 rounded text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-3 w-3" }) })] })) : (r.text && (0, jsx_runtime_1.jsx)("p", { className: "mt-0.5 text-[rgb(var(--fg-default))] whitespace-pre-wrap break-words leading-snug", children: r.text })), !isEditing && r.files && r.files.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "mt-1 flex flex-wrap gap-1.5", children: r.files.map((f, i) => ((0, jsx_runtime_1.jsxs)("a", { href: f.url, target: "_blank", rel: "noopener noreferrer", title: f.name, className: "inline-flex items-center gap-1 max-w-[12rem] rounded-md border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] px-1.5 py-0.5 text-[10px] text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:border-[rgb(var(--color-primary))]/40 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "h-3 w-3 shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: f.name })] }, i))) }))] }, r.seq));
+                    }) })) }), onAdd && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t border-[rgb(var(--bd-subtle))] px-2 py-1.5 space-y-1.5", children: [pendingFiles.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-1.5", children: pendingFiles.map((f, i) => ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1 max-w-[12rem] rounded-md border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] pl-1.5 pr-1 py-0.5 text-[10px] text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "h-3 w-3 shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: f.name }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setPendingFiles(prev => prev.filter((_, idx) => idx !== i)), title: t('Remove'), className: "p-0.5 rounded-full hover:text-[rgb(var(--color-error))]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-2.5 w-2.5" }) })] }, i))) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [onUploadFiles && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: handlePickFiles }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: !canAdd || saving || uploading, title: t('Attach files'), className: "p-1.5 rounded border border-[rgb(var(--bd-default))] text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:border-[rgb(var(--color-primary))]/50 disabled:opacity-50 transition-colors shrink-0", children: uploading ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { className: "h-3.5 w-3.5" }) })] })), (0, jsx_runtime_1.jsx)("input", { value: text, onChange: (e) => setText(e.target.value), onKeyDown: (e) => { if (e.key === 'Enter' && !e.shiftKey) {
+                                    e.preventDefault();
+                                    handleAdd();
+                                } }, disabled: !canAdd || saving, placeholder: t('Add a note...'), className: "flex-1 text-xs rounded border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] px-2 py-1 text-[rgb(var(--fg-default))] focus:outline-none focus:ring-1 focus:ring-[rgb(var(--color-primary))] disabled:opacity-60" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleAdd, disabled: !canAdd || saving || uploading || (!text.trim() && pendingFiles.length === 0), title: t('Add'), className: "p-1.5 rounded bg-[rgb(var(--color-primary))] text-white disabled:opacity-50 hover:opacity-90 transition-opacity shrink-0", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: "h-3.5 w-3.5" }) })] })] }))] }));
+}
+function RemarkInput({ value, onChange, module, documentId, documentName, documentNo, actionUrl, stage = 'General', session, label, placeholder, rows = 1, showTrail = false, onUploadFiles, disabled = false, className, inputClassName, error = false, required = false, }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const [trailOpen, setTrailOpen] = (0, react_1.useState)(false);
+    const [remarks, setRemarks] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const taRef = (0, react_1.useRef)(null);
+    // Auto-grow with content: starts at one row, expands smoothly up to a cap, then scrolls.
+    // User-dragged heights are respected (we only auto-size while the user hasn't manually resized).
+    const userResized = (0, react_1.useRef)(false);
+    const autoGrow = (0, react_1.useCallback)(() => {
+        const el = taRef.current;
+        if (!el || userResized.current)
+            return;
+        el.style.height = 'auto';
+        el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
+    }, []);
+    (0, react_1.useLayoutEffect)(() => { autoGrow(); }, [value, autoGrow]);
+    const hasDoc = documentId !== null && documentId !== undefined && documentId !== '' && Number(documentId) !== 0;
+    const [count, setCount] = (0, react_1.useState)(0);
+    const currentUserId = Number(session?.user?.UserID ?? session?.user?.userID ?? 0) || undefined;
+    const loadTrail = (0, react_1.useCallback)(async () => {
+        if (!hasDoc) {
+            setRemarks([]);
+            setCount(0);
+            return;
+        }
+        setLoading(true);
+        try {
+            const res = await remarks_1.RemarkIntelligenceAPI.getRemarkData(module, documentId, session);
+            const raw = res.success && res.data ? res.data.remarks : [];
+            // Oldest → newest so the trail reads top-to-bottom (latest message at the bottom).
+            const list = [...raw].sort((a, b) => (a.seq ?? 0) - (b.seq ?? 0));
+            setRemarks(list);
+            setCount(list.length);
+        }
+        catch {
+            setRemarks([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [hasDoc, module, documentId, session]);
+    // Eager count on mount (and when the doc changes) so the Trail badge shows up front.
+    (0, react_1.useEffect)(() => {
+        let alive = true;
+        if (!hasDoc || !showTrail) {
+            setCount(0);
+            return;
+        }
+        remarks_1.RemarkIntelligenceAPI.getRemarkData(module, documentId, session).then((res) => {
+            if (alive)
+                setCount(res.success && res.data ? res.data.remarks.length : 0);
+        }).catch(() => { });
+        return () => { alive = false; };
+    }, [hasDoc, showTrail, module, documentId, session]);
+    const openTrail = (0, react_1.useCallback)(() => {
+        setTrailOpen(true);
+        loadTrail();
+    }, [loadTrail]);
+    const handleEdit = (0, react_1.useCallback)(async (seq, text) => {
+        if (!hasDoc)
+            return;
+        const res = await remarks_1.RemarkIntelligenceAPI.editRemarkData(module, documentId, seq, text, session);
+        if (res.success)
+            await loadTrail();
+    }, [hasDoc, module, documentId, session, loadTrail]);
+    const handleDelete = (0, react_1.useCallback)(async (seq) => {
+        if (!hasDoc)
+            return;
+        const res = await remarks_1.RemarkIntelligenceAPI.deleteRemarkData(module, documentId, seq, session);
+        if (res.success)
+            await loadTrail();
+    }, [hasDoc, module, documentId, session, loadTrail]);
+    // What the trail shows: saved entries + the currently-typed (unsaved) remark, so the user
+    // sees their in-progress note captured even before the form is saved.
+    const displayRemarks = (() => {
+        const draft = (value || '').trim();
+        const lastSaved = remarks.length ? (remarks[remarks.length - 1].text || '').trim() : '';
+        if (!draft || draft === lastSaved)
+            return remarks;
+        return [
+            ...remarks,
+            { seq: remarks.length + 1, stage, status: t('Current'), text: draft, by: null, byName: t('You'), at: '' },
+        ];
+    })();
+    // Append a note straight to the trail from inside the popup (independent of the host form).
+    const handleAdd = (0, react_1.useCallback)(async (text, files) => {
+        if (!hasDoc)
+            return;
+        const res = await remarks_1.RemarkIntelligenceAPI.saveRemarkData({
+            Module: module,
+            DocumentID: documentId,
+            DocumentName: documentName,
+            DocumentNo: documentNo,
+            ActionUrl: actionUrl,
+            stage,
+            status: '',
+            text,
+            files,
+        }, session);
+        if (res.success)
+            await loadTrail();
+    }, [hasDoc, module, documentId, documentName, documentNo, actionUrl, stage, session, loadTrail]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [label && ((0, jsx_runtime_1.jsxs)("label", { className: "text-xs font-medium text-[rgb(var(--fg-muted))] mb-1.5 flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("span", { children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "ml-0.5 text-[rgb(var(--color-error))]", children: "*" })] }), hasDoc && showTrail && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: openTrail, title: t('View remark trail'), className: "inline-flex items-center gap-1 text-[11px] font-medium text-[rgb(var(--color-primary))] hover:opacity-80", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-3.5 w-3.5" }), t('Trail'), count > 0 ? ` (${count})` : ''] }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("textarea", { ref: taRef, value: value, onChange: (e) => { onChange(e.target.value); autoGrow(); }, onMouseDown: () => { }, onMouseUp: (e) => {
+                            // If the user dragged the resize grip, keep their height; double-clearing resets it.
+                            const el = e.currentTarget;
+                            if (el.style.height && Math.abs(el.clientHeight - el.scrollHeight) > 4)
+                                userResized.current = true;
+                        }, placeholder: placeholder ?? t('Add remarks or notes...'), rows: rows, disabled: disabled, className: (0, utils_1.cn)('w-full text-sm rounded-md border bg-[rgb(var(--bg-surface))] px-3 py-2 pr-9 text-[rgb(var(--fg-default))]', error
+                            ? 'border-[rgb(var(--color-error))] placeholder:text-[rgb(var(--fg-subtle))]'
+                            : 'border-[rgb(var(--bd-default))] placeholder:text-[rgb(var(--fg-subtle))]', 'transition-[height,box-shadow,border-color] duration-150 ease-out', 'focus:outline-none focus:border-[rgb(var(--color-primary))] focus:ring-2 focus:ring-[rgb(var(--color-primary))]/30', 'resize-y overflow-auto min-h-[2.25rem] disabled:opacity-60', inputClassName) }), hasDoc && showTrail && !label && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: openTrail, title: t('View remark trail'), className: "absolute top-1.5 right-1.5 inline-flex h-5 w-5 items-center justify-center rounded-full border border-[rgb(var(--bd-default))] text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:border-[rgb(var(--color-primary))]/50 hover:bg-[rgb(var(--color-primary-subtle))] transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-3 w-3" }), count > 0 && (0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1 h-2 w-2 rounded-full bg-[rgb(var(--color-primary))]" })] }))] }), (0, jsx_runtime_1.jsx)(components_1.Modal, { open: trailOpen, onOpenChange: setTrailOpen, children: (0, jsx_runtime_1.jsxs)(components_1.ModalContent, { size: "md", hideCloseButton: true, className: "p-0 overflow-hidden max-h-[80vh]", children: [(0, jsx_runtime_1.jsx)(components_1.ModalTitle, { className: "sr-only", children: t('Remarks') }), (0, jsx_runtime_1.jsx)(RemarkTrail, { remarks: displayRemarks, loading: loading, onAdd: hasDoc ? handleAdd : undefined, onClose: () => setTrailOpen(false), documentNo: documentNo, currentUserId: currentUserId, onEdit: hasDoc ? handleEdit : undefined, onDelete: hasDoc ? handleDelete : undefined, onUploadFiles: onUploadFiles, className: "max-h-[80vh] border-0 rounded-none" })] }) })] }));
+}

package/dist/cjs/components/forms/remark-input/index.js

@@ -0,0 +1,8 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commitRemarkToTrail = exports.RemarkTrail = exports.RemarkInput = void 0;
+var RemarkInput_1 = require("./RemarkInput.js");
+Object.defineProperty(exports, "RemarkInput", { enumerable: true, get: function () { return RemarkInput_1.RemarkInput; } });
+Object.defineProperty(exports, "RemarkTrail", { enumerable: true, get: function () { return RemarkInput_1.RemarkTrail; } });
+Object.defineProperty(exports, "commitRemarkToTrail", { enumerable: true, get: function () { return RemarkInput_1.commitRemarkToTrail; } });