indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/modals/logout-modal.js

@@ -0,0 +1,45 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogoutModal = LogoutModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("../ui/index.js");
+const utils_1 = require("../../lib/utils.js");
+const lucide_react_1 = require("lucide-react");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+function LogoutModal({ isOpen, onClose, onLogout, sessionData, onViewTasks, className }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                onLogout();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, onClose, onLogout]);
+    const getDeviceIcon = (type) => {
+        const cls = "h-3.5 w-3.5 text-[rgb(var(--fg-muted))]";
+        if (type === 'mobile')
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.Smartphone, { className: cls });
+        if (type === 'tablet')
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.Tablet, { className: cls });
+        return (0, jsx_runtime_1.jsx)(lucide_react_1.Monitor, { className: cls });
+    };
+    const currentDevice = sessionData.activeDevices.find(d => d.isCurrent);
+    const pendingCount = sessionData.tasks.overdue + sessionData.tasks.dueSoon;
+    const hasPending = pendingCount > 0;
+    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: isOpen, onOpenChange: onClose, children: (0, jsx_runtime_1.jsxs)(ui_1.DialogContent, { className: (0, utils_1.cn)("sm:max-w-[400px] p-0 gap-0 rounded-xl overflow-hidden", className), hideCloseButton: true, children: [(0, jsx_runtime_1.jsx)(ui_1.DialogHeader, { className: "px-5 pt-4 pb-3.5 border-b border-[rgb(var(--bd-default))]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.DialogTitle, { className: "text-base font-semibold text-[rgb(var(--fg-default))]", children: t('Log out?') }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-0.5", children: t('Your work will be saved automatically') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0 pt-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 px-2 py-1 rounded-md bg-[rgb(var(--bg-subtle))] border border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "h-3 w-3 text-[rgb(var(--fg-muted))]" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: sessionData.duration })] }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "close-btn-sm", "aria-label": "Close", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "px-5 py-4 space-y-3", children: [hasPending && ((0, jsx_runtime_1.jsxs)("button", { onClick: onViewTasks, className: (0, utils_1.cn)("w-full flex items-center gap-3 p-3 rounded-lg border text-left transition-colors group", sessionData.tasks.overdue > 0
+                                ? "bg-[rgb(var(--color-error))]/5 border-[rgb(var(--color-error))]/20 hover:bg-[rgb(var(--color-error))]/10"
+                                : "bg-[rgb(var(--color-warning))]/5 border-[rgb(var(--color-warning))]/20 hover:bg-[rgb(var(--color-warning))]/10"), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg", sessionData.tasks.overdue > 0
+                                        ? "bg-[rgb(var(--color-error))]/10"
+                                        : "bg-[rgb(var(--color-warning))]/10"), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ClipboardCheck, { className: (0, utils_1.cn)("h-4 w-4", sessionData.tasks.overdue > 0 ? "text-[rgb(var(--color-error))]" : "text-[rgb(var(--color-warning))]") }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("p", { className: (0, utils_1.cn)("text-sm font-semibold", sessionData.tasks.overdue > 0 ? "text-[rgb(var(--color-error))]" : "text-[rgb(var(--color-warning))]"), children: [pendingCount, " ", sessionData.tasks.overdue > 0 ? t('overdue task') : t('pending task'), pendingCount !== 1 ? 's' : ''] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-0.5", children: t('View notifications') })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { className: "h-3.5 w-3.5 text-[rgb(var(--fg-muted))] group-hover:translate-x-0.5 transition-transform flex-shrink-0" })] })), currentDevice && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 p-3 rounded-lg bg-[rgb(var(--bg-subtle))] border border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))]", children: getDeviceIcon(currentDevice.type) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-[rgb(var(--fg-default))] truncate", children: currentDevice.browser && currentDevice.os
+                                                ? `${currentDevice.browser} on ${currentDevice.os}`
+                                                : t('This Device') }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mt-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-1.5 w-1.5 rounded-full bg-[rgb(var(--color-success))]" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: t('Active now') })] })] })] }))] }), (0, jsx_runtime_1.jsx)(ui_1.DialogFooter, { className: "px-5 py-3 bg-[rgb(var(--bg-subtle))] border-t border-[rgb(var(--bd-default))]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 w-full", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: onClose, className: "flex-1 flex items-center justify-center gap-1.5 rounded-lg px-4 py-2 bg-[rgb(var(--bg-surface))] hover:bg-[rgb(var(--bg-hover))] text-[rgb(var(--fg-default))] border border-[rgb(var(--bd-default))] transition-colors text-sm font-medium", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.XCircle, { className: "h-3.5 w-3.5" }), t('Cancel')] }), (0, jsx_runtime_1.jsxs)("button", { onClick: onLogout, className: "flex-1 flex items-center justify-center gap-1.5 rounded-lg px-4 py-2 bg-[rgb(var(--color-error))]/10 hover:bg-[rgb(var(--color-error))]/20 text-[rgb(var(--color-error))] border border-[rgb(var(--color-error))]/25 transition-colors text-sm font-medium", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "h-3.5 w-3.5" }), t('Log Out')] })] }) })] }) }));
+}

package/dist/cjs/components/modals/modal-alert.js

@@ -0,0 +1,295 @@
+'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.LoadingAlert = exports.CriticalAlert = exports.ConfirmationAlert = exports.InfoAlert = exports.WarningAlert = exports.ErrorAlert = exports.SuccessAlert = exports.ALERT_TOKENS = void 0;
+exports.ModalAlert = ModalAlert;
+exports.useModalAlert = useModalAlert;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const DialogPrimitive = __importStar(require("@radix-ui/react-dialog"));
+const utils_1 = require("../../lib/utils.js");
+const lucide_react_1 = require("lucide-react");
+const loading_1 = require("../ui/overlays/loading.js");
+// Design Tokens
+exports.ALERT_TOKENS = {
+    colors: {
+        success: {
+            bg: 'bg-green-50',
+            border: 'border-green-200',
+            icon: 'text-green-600',
+            title: 'text-green-900',
+            description: 'text-green-700',
+            primaryButton: 'bg-green-600 hover:bg-green-700 text-white',
+            secondaryButton: 'bg-green-100 hover:bg-green-200 text-green-700'
+        },
+        error: {
+            bg: 'bg-red-50',
+            border: 'border-red-200',
+            icon: 'text-red-600',
+            title: 'text-red-900',
+            description: 'text-red-700',
+            primaryButton: 'bg-red-600 hover:bg-red-700 text-white',
+            secondaryButton: 'bg-red-100 hover:bg-red-200 text-red-700'
+        },
+        warning: {
+            bg: 'bg-amber-50',
+            border: 'border-amber-200',
+            icon: 'text-amber-600',
+            title: 'text-amber-900',
+            description: 'text-amber-700',
+            primaryButton: 'bg-amber-600 hover:bg-amber-700 text-white',
+            secondaryButton: 'bg-amber-100 hover:bg-amber-200 text-amber-700'
+        },
+        info: {
+            bg: 'bg-blue-50',
+            border: 'border-blue-200',
+            icon: 'text-blue-600',
+            title: 'text-blue-900',
+            description: 'text-blue-700',
+            primaryButton: 'bg-blue-600 hover:bg-blue-700 text-white',
+            secondaryButton: 'bg-blue-100 hover:bg-blue-200 text-blue-700'
+        },
+        confirmation: {
+            bg: 'bg-gray-50',
+            border: 'border-gray-200',
+            icon: 'text-gray-600',
+            title: 'text-gray-900',
+            description: 'text-gray-700',
+            primaryButton: 'bg-gray-900 hover:bg-gray-800 text-white',
+            secondaryButton: 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+        },
+        critical: {
+            bg: 'bg-red-100',
+            border: 'border-red-300',
+            icon: 'text-red-700',
+            title: 'text-red-900',
+            description: 'text-red-800',
+            primaryButton: 'bg-red-700 hover:bg-red-800 text-white',
+            secondaryButton: 'bg-red-200 hover:bg-red-300 text-red-800'
+        },
+        loading: {
+            bg: 'bg-blue-50',
+            border: 'border-blue-200',
+            icon: 'text-blue-600',
+            title: 'text-blue-900',
+            description: 'text-blue-700',
+            primaryButton: 'bg-blue-600 hover:bg-blue-700 text-white',
+            secondaryButton: 'bg-blue-100 hover:bg-blue-200 text-blue-700'
+        }
+    },
+    spacing: {
+        padding: 'p-6',
+        gap: 'gap-4',
+        iconSize: 'w-8 h-8',
+        buttonPadding: 'px-4 py-2',
+        borderRadius: 'rounded-xl'
+    },
+    typography: {
+        title: 'text-lg font-semibold',
+        description: 'text-sm leading-relaxed',
+        button: 'text-sm font-medium'
+    },
+    animations: {
+        overlay: 'transition-all duration-200 ease-out data-[state=open]:opacity-100 data-[state=closed]:opacity-0',
+        content: 'transition-all duration-200 ease-out data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=closed]:scale-95'
+    }
+};
+const ALERT_ICONS = {
+    success: lucide_react_1.CheckCircle,
+    error: lucide_react_1.XCircle,
+    warning: lucide_react_1.AlertTriangle,
+    info: lucide_react_1.Info,
+    confirmation: lucide_react_1.HelpCircle,
+    critical: lucide_react_1.AlertCircle,
+    loading: lucide_react_1.Loader2
+};
+function ModalAlert({ open, onOpenChange, type, title, description, actions = [], showCloseButton = true, autoClose, preventClose = false, className, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, ...props }) {
+    const colors = exports.ALERT_TOKENS.colors[type];
+    const IconComponent = ALERT_ICONS[type];
+    const isLoading = type === 'loading';
+    // Auto-close functionality
+    React.useEffect(() => {
+        if (autoClose && open && !preventClose) {
+            const timer = setTimeout(() => {
+                onOpenChange(false);
+            }, autoClose);
+            return () => clearTimeout(timer);
+        }
+    }, [autoClose, open, onOpenChange, preventClose]);
+    // Default actions if none provided
+    const defaultActions = React.useMemo(() => {
+        if (actions.length > 0)
+            return actions;
+        switch (type) {
+            case 'confirmation':
+                return [
+                    { label: 'Cancel', onClick: () => onOpenChange(false), variant: 'secondary' },
+                    { label: 'Confirm', onClick: () => onOpenChange(false), variant: 'primary' }
+                ];
+            case 'error':
+            case 'critical':
+                return [
+                    { label: 'Try Again', onClick: () => onOpenChange(false), variant: 'secondary' },
+                    { label: 'OK', onClick: () => onOpenChange(false), variant: 'primary' }
+                ];
+            case 'warning':
+                return [
+                    { label: 'Cancel', onClick: () => onOpenChange(false), variant: 'secondary' },
+                    { label: 'Continue', onClick: () => onOpenChange(false), variant: 'primary' }
+                ];
+            case 'loading':
+                return []; // No actions for loading state
+            default:
+                return [
+                    { label: 'OK', onClick: () => onOpenChange(false), variant: 'primary' }
+                ];
+        }
+    }, [actions, type, onOpenChange]);
+    // Forward Radix's open-change events to the parent. Radix calls this with
+    // a boolean (true/false). We honor false-to-close unless preventClose is set.
+    const handleOpenChange = (nextOpen) => {
+        if (nextOpen)
+            return; // ignore Radix-driven open events; we control opening
+        if (preventClose || isLoading)
+            return;
+        onOpenChange(false);
+    };
+    return ((0, jsx_runtime_1.jsx)(DialogPrimitive.Root, { open: open, onOpenChange: handleOpenChange, children: (0, jsx_runtime_1.jsxs)(DialogPrimitive.Portal, { children: [(0, jsx_runtime_1.jsx)(DialogPrimitive.Overlay, { className: (0, utils_1.cn)('fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm', exports.ALERT_TOKENS.animations.overlay) }), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { className: (0, utils_1.cn)('fixed left-[50%] top-[50%] z-[201] grid w-[calc(100%-2rem)] max-w-md translate-x-[-50%] translate-y-[-50%] border shadow-2xl rounded-2xl overflow-hidden', colors.bg, colors.border, exports.ALERT_TOKENS.spacing.borderRadius, exports.ALERT_TOKENS.animations.content, 'focus:outline-none focus:ring-2 focus:ring-offset-2', type === 'success' && 'focus:ring-green-500', type === 'error' && 'focus:ring-red-500', type === 'warning' && 'focus:ring-amber-500', type === 'info' && 'focus:ring-blue-500', type === 'confirmation' && 'focus:ring-gray-500', type === 'critical' && 'focus:ring-red-500', type === 'loading' && 'focus:ring-blue-500', className), "aria-labelledby": ariaLabelledby || 'alert-title', "aria-describedby": undefined, ...props, children: [(0, jsx_runtime_1.jsx)(DialogPrimitive.Title, { className: "sr-only", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(exports.ALERT_TOKENS.spacing.padding), children: [showCloseButton && !preventClose && !isLoading && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: (e) => { e.stopPropagation(); onOpenChange(false); }, className: (0, utils_1.cn)('absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none', colors.icon), "aria-label": "Close alert", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] })), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex', exports.ALERT_TOKENS.spacing.gap), children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0", children: isLoading ? (
+                                            // Our custom bouncing dots animation for loading
+                                            (0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(loading_1.Loading, { variant: "dots", size: "md", color: colors.icon }) })) : ((0, jsx_runtime_1.jsx)(IconComponent, { className: (0, utils_1.cn)(exports.ALERT_TOKENS.spacing.iconSize, colors.icon), "aria-hidden": "true" })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 space-y-2", children: [(0, jsx_runtime_1.jsx)("h4", { className: (0, utils_1.cn)(exports.ALERT_TOKENS.typography.title, colors.title), children: title }), (0, jsx_runtime_1.jsx)("p", { id: "alert-description", className: (0, utils_1.cn)(exports.ALERT_TOKENS.typography.description, colors.description, 'break-words whitespace-pre-line'), children: description }), autoClose && open && !preventClose && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 text-xs opacity-70", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "w-3 h-3" }), (0, jsx_runtime_1.jsxs)("span", { children: ["Auto-closing in ", Math.ceil(autoClose / 1000), "s"] })] })), defaultActions.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 pt-4 justify-end", children: defaultActions.map((action, index) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                                                            // Always close the dialog on button click. Some
+                                                            // actions provide their own onClick; run that
+                                                            // first, then dismiss. Calling onOpenChange
+                                                            // directly avoids relying on DialogPrimitive.Close
+                                                            // wrapping which has been unreliable when the
+                                                            // parent re-renders during click handling.
+                                                            e.stopPropagation();
+                                                            if (action.onClick)
+                                                                action.onClick();
+                                                            if (!preventClose && !isLoading)
+                                                                onOpenChange(false);
+                                                        }, disabled: action.disabled || isLoading, className: (0, utils_1.cn)('inline-flex items-center justify-center rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none', exports.ALERT_TOKENS.spacing.buttonPadding, exports.ALERT_TOKENS.typography.button, action.variant === 'primary'
+                                                            ? colors.primaryButton
+                                                            : colors.secondaryButton), children: action.label }, index))) }))] })] })] })] })] }) }));
+}
+// Preset Alert Components for Common Use Cases
+const SuccessAlert = (props) => ((0, jsx_runtime_1.jsx)(ModalAlert, { type: "success", ...props }));
+exports.SuccessAlert = SuccessAlert;
+const ErrorAlert = (props) => ((0, jsx_runtime_1.jsx)(ModalAlert, { type: "error", ...props }));
+exports.ErrorAlert = ErrorAlert;
+const WarningAlert = (props) => ((0, jsx_runtime_1.jsx)(ModalAlert, { type: "warning", ...props }));
+exports.WarningAlert = WarningAlert;
+const InfoAlert = (props) => ((0, jsx_runtime_1.jsx)(ModalAlert, { type: "info", ...props }));
+exports.InfoAlert = InfoAlert;
+const ConfirmationAlert = (props) => ((0, jsx_runtime_1.jsx)(ModalAlert, { type: "confirmation", ...props }));
+exports.ConfirmationAlert = ConfirmationAlert;
+const CriticalAlert = (props) => ((0, jsx_runtime_1.jsx)(ModalAlert, { type: "critical", preventClose: true, ...props }));
+exports.CriticalAlert = CriticalAlert;
+const LoadingAlert = (props) => ((0, jsx_runtime_1.jsx)(ModalAlert, { type: "loading", preventClose: true, showCloseButton: false, ...props }));
+exports.LoadingAlert = LoadingAlert;
+// Hook for managing alert state
+function useModalAlert() {
+    const [alert, setAlert] = React.useState({
+        open: false,
+        type: 'info',
+        title: '',
+        description: ''
+    });
+    const showAlert = React.useCallback((params) => {
+        setAlert({ ...params, open: true });
+    }, []);
+    const hideAlert = React.useCallback(() => {
+        setAlert(prev => ({ ...prev, open: false }));
+    }, []);
+    const showSuccess = React.useCallback((title, description, autoClose = 3000) => {
+        showAlert({ type: 'success', title, description, autoClose });
+    }, [showAlert]);
+    const showError = React.useCallback((title, description) => {
+        showAlert({ type: 'error', title, description });
+    }, [showAlert]);
+    const showWarning = React.useCallback((title, description, actions) => {
+        showAlert({ type: 'warning', title, description, actions });
+    }, [showAlert]);
+    const showInfo = React.useCallback((title, description, autoClose) => {
+        showAlert({ type: 'info', title, description, autoClose });
+    }, [showAlert]);
+    const showConfirmation = React.useCallback((title, description, onConfirm, onCancel) => {
+        showAlert({
+            type: 'confirmation',
+            title,
+            description,
+            actions: [
+                {
+                    label: 'Cancel',
+                    onClick: () => {
+                        onCancel?.();
+                        hideAlert();
+                    },
+                    variant: 'secondary'
+                },
+                {
+                    label: 'Confirm',
+                    onClick: () => {
+                        hideAlert();
+                        onConfirm();
+                    },
+                    variant: 'primary'
+                }
+            ]
+        });
+    }, [showAlert, hideAlert]);
+    const showLoading = React.useCallback((title, description) => {
+        showAlert({ type: 'loading', title, description });
+    }, [showAlert]);
+    // Stable AlertComponent reference. Declaring it inline as `() => (...)`
+    // creates a new function identity each render → React remounts the whole
+    // modal tree on every render → click handlers don't fire reliably while
+    // the parent is re-rendering frequently. Wrapping in useCallback keeps
+    // the reference stable.
+    const AlertComponent = React.useCallback(() => ((0, jsx_runtime_1.jsx)(ModalAlert, { open: alert.open, onOpenChange: hideAlert, type: alert.type, title: alert.title, description: alert.description, actions: alert.actions, autoClose: alert.autoClose })), [alert.open, alert.type, alert.title, alert.description, alert.actions, alert.autoClose, hideAlert]);
+    return {
+        alert,
+        showAlert,
+        hideAlert,
+        showSuccess,
+        showError,
+        showWarning,
+        showInfo,
+        showConfirmation,
+        showLoading,
+        AlertComponent,
+    };
+}

package/dist/cjs/components/modals/password-reset-modal.js

@@ -0,0 +1,112 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasswordResetModal = PasswordResetModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Modal_1 = require("./Modal.js");
+const input_1 = require("../ui/forms/input.js");
+const lucide_react_1 = require("lucide-react");
+const GlobalAlertContext_1 = require("../../contexts/GlobalAlertContext.js");
+const passwordRequirements = [
+    { label: 'At least 8 characters', test: (pwd) => pwd.length >= 8 },
+    { label: 'Contains uppercase letter', test: (pwd) => /[A-Z]/.test(pwd) },
+    { label: 'Contains lowercase letter', test: (pwd) => /[a-z]/.test(pwd) },
+    { label: 'Contains number', test: (pwd) => /\d/.test(pwd) },
+];
+function PasswordResetModal({ isOpen, onClose, email, otpCode, onSuccess, }) {
+    const alerts = (0, GlobalAlertContext_1.useGlobalAlert)();
+    const [newPassword, setNewPassword] = (0, react_1.useState)('');
+    const [retypePassword, setRetypePassword] = (0, react_1.useState)('');
+    const [showNewPassword, setShowNewPassword] = (0, react_1.useState)(false);
+    const [showRetypePassword, setShowRetypePassword] = (0, react_1.useState)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [passwordStrength, setPasswordStrength] = (0, react_1.useState)(0);
+    // Calculate password strength
+    const calculatePasswordStrength = (password) => {
+        let strength = 0;
+        passwordRequirements.forEach((req) => {
+            if (req.test(password))
+                strength++;
+        });
+        setPasswordStrength(strength);
+    };
+    const getStrengthColor = () => {
+        if (passwordStrength <= 1)
+            return 'bg-red-500';
+        if (passwordStrength <= 3)
+            return 'bg-yellow-500';
+        return 'bg-green-500';
+    };
+    const getStrengthLabel = () => {
+        if (passwordStrength <= 1)
+            return 'Weak';
+        if (passwordStrength <= 2)
+            return 'Medium';
+        return 'Strong';
+    };
+    const handlePasswordChange = (value) => {
+        setNewPassword(value);
+        calculatePasswordStrength(value);
+    };
+    // Prevent paste in password fields (security feature)
+    const preventPaste = (e) => {
+        e.preventDefault();
+        alerts.showWarning('Security Notice', 'Pasting passwords is disabled for security reasons. Please type your password.');
+    };
+    const validateForm = () => {
+        // Check minimum password strength (4 requirements now)
+        if (passwordStrength < 4) {
+            alerts.showError('Weak Password', 'Please meet all password requirements for a strong password.');
+            return false;
+        }
+        // Check if passwords match
+        if (newPassword !== retypePassword) {
+            alerts.showError('Password Mismatch', 'Passwords do not match. Please try again.');
+            return false;
+        }
+        return true;
+    };
+    const handleResetPassword = async () => {
+        if (!validateForm())
+            return;
+        setIsLoading(true);
+        try {
+            // Call server-side proxy (company credentials read from HttpOnly cookie)
+            const response = await fetch('/api/auth/forgot-password-otp', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ action: 'reset', email, otpCode, newPassword })
+            });
+            const result = await response.json();
+            if (result.success) {
+                alerts.showSuccess('Password Reset Successful', 'Your password has been reset successfully.');
+                onSuccess();
+                onClose();
+            }
+            else {
+                alerts.showError('Reset Failed', result.message || 'Failed to reset password. Please try again.');
+            }
+        }
+        catch (error) {
+            alerts.showError('Error', 'An error occurred. Please try again.');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const handleClose = () => {
+        if (!isLoading) {
+            setNewPassword('');
+            setRetypePassword('');
+            setShowNewPassword(false);
+            setShowRetypePassword(false);
+            setPasswordStrength(0);
+            onClose();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(Modal_1.Modal, { open: isOpen, onOpenChange: handleClose, children: (0, jsx_runtime_1.jsxs)(Modal_1.ModalContent, { size: "sm", className: "p-0", children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { className: "sr-only", children: (0, jsx_runtime_1.jsx)(Modal_1.ModalTitle, { children: "Reset Password" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 sm:p-6 max-h-[100dvh] overflow-y-auto", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-5 sm:mb-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-12 h-12 sm:w-14 sm:h-14 bg-[rgb(var(--color-primary))]/10 rounded-full flex items-center justify-center mb-3 sm:mb-4", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { className: "h-6 w-6 sm:h-7 sm:w-7 text-[rgb(var(--color-primary))]" }) }), (0, jsx_runtime_1.jsx)("h2", { className: "text-xl sm:text-2xl font-bold text-[rgb(var(--fg-default))] mb-2", children: "Create New Password" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs sm:text-sm text-[rgb(var(--fg-muted))] break-words", children: ["Resetting password for ", (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-[rgb(var(--fg-default))]", children: email }), ". Your new password must be different from previously used passwords."] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "newPassword", className: "block text-sm font-medium text-[rgb(var(--fg-default))] mb-1.5", children: "New Password" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { id: "newPassword", type: showNewPassword ? 'text' : 'password', value: newPassword, onChange: (e) => handlePasswordChange(e.target.value), onPaste: preventPaste, placeholder: "Enter your new password", disabled: isLoading, className: "pr-10 h-11 text-base", autoComplete: "new-password" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setShowNewPassword(!showNewPassword), className: "absolute right-3 top-1/2 -translate-y-1/2 text-[rgb(var(--color-icon))] hover:text-[rgb(var(--fg-default))]", disabled: isLoading, tabIndex: -1, children: showNewPassword ? (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { className: "h-5 w-5" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { className: "h-5 w-5" }) })] }), newPassword && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "Password strength" }), (0, jsx_runtime_1.jsx)("span", { className: `text-xs font-medium ${passwordStrength <= 1 ? 'text-red-600' : passwordStrength <= 2 ? 'text-yellow-600' : 'text-green-600'}`, children: getStrengthLabel() })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-1.5 w-full bg-[rgb(var(--bg-hover))] rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: `h-full transition-all duration-300 ${getStrengthColor()}`, style: { width: `${(passwordStrength / 4) * 100}%` } }) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "retypePassword", className: "block text-sm font-medium text-[rgb(var(--fg-default))] mb-1.5", children: "Confirm Password" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { id: "retypePassword", type: showRetypePassword ? 'text' : 'password', value: retypePassword, onChange: (e) => setRetypePassword(e.target.value), onPaste: preventPaste, placeholder: "Re-enter your new password", disabled: isLoading, className: "pr-10 h-11 text-base", autoComplete: "new-password" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setShowRetypePassword(!showRetypePassword), className: "absolute right-3 top-1/2 -translate-y-1/2 text-[rgb(var(--color-icon))] hover:text-[rgb(var(--fg-default))]", disabled: isLoading, tabIndex: -1, children: showRetypePassword ? (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { className: "h-5 w-5" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { className: "h-5 w-5" }) })] }), retypePassword && ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 flex items-center gap-1.5", children: newPassword === retypePassword ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4 text-green-600" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-green-600 font-medium", children: "Passwords match" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4 text-red-600" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-red-600 font-medium", children: "Passwords do not match" })] })) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-[rgb(var(--bg-hover))] rounded-lg p-3 sm:p-4 border border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-[rgb(var(--fg-default))] mb-2 sm:mb-3", children: "Password Requirements" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: passwordRequirements.map((req, index) => {
+                                                const isPassed = req.test(newPassword);
+                                                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: `flex-shrink-0 w-4 h-4 rounded-full flex items-center justify-center ${isPassed ? 'bg-green-100' : 'bg-[rgb(var(--bg-hover))]'}`, children: isPassed && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-3 w-3 text-green-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: `text-xs ${isPassed ? 'text-green-700' : 'text-[rgb(var(--fg-muted))]'}`, children: req.label })] }, index));
+                                            }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 sm:gap-3 mt-5 sm:mt-6", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleClose, disabled: isLoading, className: "flex-1 rounded-xl px-3 sm:px-4 py-2.5 min-h-[2.75rem] bg-[rgb(var(--bg-surface))] hover:bg-[rgb(var(--bg-hover))] text-[rgb(var(--fg-default))] border border-[rgb(var(--bd-default))] transition-all duration-200 hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium", children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleResetPassword, disabled: isLoading || passwordStrength < 4 || newPassword !== retypePassword || !newPassword || !retypePassword, className: "flex-1 rounded-xl px-3 sm:px-4 py-2.5 min-h-[2.75rem] bg-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary-dark))] text-white border border-[rgb(var(--color-primary))] transition-all duration-200 hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium", children: isLoading ? 'Resetting...' : 'Reset Password' })] })] })] }) }));
+}

package/dist/cjs/components/modals/session-expiry-warning.js

@@ -0,0 +1,18 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SessionExpiryWarning = SessionExpiryWarning;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("../ui/index.js");
+const ui_2 = require("../ui/index.js");
+const lucide_react_1 = require("lucide-react");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+/**
+ * Modal to warn users when their session is about to expire.
+ * Gives them the option to extend the session or logout immediately.
+ */
+function SessionExpiryWarning({ isOpen, onExtend, onLogout, minutesRemaining }) {
+    const { t } = (0, LanguageContext_1.useOptionalLanguage)();
+    const minuteLabel = minutesRemaining === 1 ? t('minute') : t('minutes');
+    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: isOpen, onOpenChange: () => { }, children: (0, jsx_runtime_1.jsxs)(ui_1.DialogContent, { className: "max-w-md", hideCloseButton: true, children: [(0, jsx_runtime_1.jsx)(ui_1.DialogHeader, { className: "border-b border-[rgb(var(--bd-default))] pb-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-10 w-10 rounded-full bg-[rgb(var(--color-warning)/0.12)] flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { className: "h-5 w-5 text-[rgb(var(--color-warning))]" }) }), (0, jsx_runtime_1.jsx)(ui_1.DialogTitle, { className: "text-lg font-semibold text-[rgb(var(--fg-default))]", children: t('Session Expiring Soon') })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "p-6 space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 p-4 rounded-lg bg-[rgb(var(--bg-subtle))] border border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "h-5 w-5 text-[rgb(var(--color-icon))]" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: t('Time Remaining') }), (0, jsx_runtime_1.jsxs)("p", { className: "text-2xl font-bold text-[rgb(var(--color-warning))]", children: [minutesRemaining, " ", minuteLabel] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-[rgb(var(--fg-default))]", children: [t('Your session will expire in'), " ", (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold text-[rgb(var(--color-warning))]", children: [minutesRemaining, " ", minuteLabel] }), "."] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: t('Would you like to extend your session and continue working?') })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-3 rounded-lg bg-[rgb(var(--color-warning)/0.08)] border border-[rgb(var(--color-warning)/0.2)]", children: (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-[rgb(var(--color-warning-hover))]", children: [(0, jsx_runtime_1.jsxs)("strong", { children: [t('Note'), ":"] }), " ", t("If you don't take action, you'll be automatically logged out when the timer reaches zero. Any unsaved work may be lost.")] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-end gap-2.5 px-6 py-4 border-t border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))]", children: [(0, jsx_runtime_1.jsx)(ui_2.Button, { variant: "action-delete", icon: lucide_react_1.LogOut, onClick: onLogout, children: t('Logout Now') }), (0, jsx_runtime_1.jsx)(ui_2.Button, { variant: "action-apply", icon: lucide_react_1.RefreshCw, onClick: onExtend, children: t('Extend Session') })] })] }) }));
+}

package/dist/cjs/components/providers/api-provider.js

@@ -0,0 +1,19 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAPI = useAPI;
+exports.APIProvider = APIProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const api_1 = require("../../lib/api/index.js");
+const APIContext = (0, react_1.createContext)({ initialized: false });
+function useAPI() {
+    return (0, react_1.useContext)(APIContext);
+}
+function APIProvider({ children }) {
+    (0, react_1.useEffect)(() => {
+        // Initialize API configuration when the component mounts
+        (0, api_1.initializeAPI)();
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(APIContext.Provider, { value: { initialized: true }, children: children }));
+}

package/dist/cjs/components/providers/query-provider.js

@@ -0,0 +1,29 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueryProvider = QueryProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_query_1 = require("@tanstack/react-query");
+const react_query_devtools_1 = require("@tanstack/react-query-devtools");
+const react_1 = require("react");
+const react_query_config_1 = require("../../lib/react-query-config.js");
+function QueryProvider({ children }) {
+    // Create a client instance - one per user session
+    const [queryClient] = (0, react_1.useState)(() => new react_query_1.QueryClient({
+        defaultOptions: {
+            queries: {
+                // Use global config from react-query-config.ts
+                ...react_query_config_1.DEFAULT_QUERY_CONFIG,
+                // Retry failed requests once
+                retry: 1,
+                // Don't retry on 4xx errors (client errors)
+                retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+            },
+            mutations: {
+                // Retry mutations once
+                retry: 1,
+            },
+        },
+    }));
+    return ((0, jsx_runtime_1.jsxs)(react_query_1.QueryClientProvider, { client: queryClient, children: [children, process.env.NODE_ENV === 'development' && ((0, jsx_runtime_1.jsx)(react_query_devtools_1.ReactQueryDevtools, { initialIsOpen: false }))] }));
+}