indas-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../ui/index.js';
+import { cn } from '../../lib/utils.js';
+import { LogOut, Clock, Monitor, Smartphone, Tablet, X, XCircle, ClipboardCheck, ArrowRight } from 'lucide-react';
+import { useLanguage } from '../../contexts/LanguageContext.js';
+export function LogoutModal({ isOpen, onClose, onLogout, sessionData, onViewTasks, className }) {
+    const { t } = useLanguage();
+    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 _jsx(Smartphone, { className: cls });
+        if (type === 'tablet')
+            return _jsx(Tablet, { className: cls });
+        return _jsx(Monitor, { className: cls });
+    };
+    const currentDevice = sessionData.activeDevices.find(d => d.isCurrent);
+    const pendingCount = sessionData.tasks.overdue + sessionData.tasks.dueSoon;
+    const hasPending = pendingCount > 0;
+    return (_jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: _jsxs(DialogContent, { className: cn("sm:max-w-[400px] p-0 gap-0 rounded-xl overflow-hidden", className), hideCloseButton: true, children: [_jsx(DialogHeader, { className: "px-5 pt-4 pb-3.5 border-b border-[rgb(var(--bd-default))]", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx(DialogTitle, { className: "text-base font-semibold text-[rgb(var(--fg-default))]", children: t('Log out?') }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-0.5", children: t('Your work will be saved automatically') })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0 pt-0.5", children: [_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: [_jsx(Clock, { className: "h-3 w-3 text-[rgb(var(--fg-muted))]" }), _jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: sessionData.duration })] }), _jsx("button", { onClick: onClose, className: "close-btn-sm", "aria-label": "Close", children: _jsx(X, { className: "h-4 w-4" }) })] })] }) }), _jsxs("div", { className: "px-5 py-4 space-y-3", children: [hasPending && (_jsxs("button", { onClick: onViewTasks, className: 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: [_jsx("div", { className: 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: _jsx(ClipboardCheck, { className: cn("h-4 w-4", sessionData.tasks.overdue > 0 ? "text-[rgb(var(--color-error))]" : "text-[rgb(var(--color-warning))]") }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("p", { className: 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' : ''] }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-0.5", children: t('View notifications') })] }), _jsx(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 && (_jsxs("div", { className: "flex items-center gap-3 p-3 rounded-lg bg-[rgb(var(--bg-subtle))] border border-[rgb(var(--bd-default))]", children: [_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) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_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') }), _jsxs("div", { className: "flex items-center gap-1.5 mt-0.5", children: [_jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-[rgb(var(--color-success))]" }), _jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: t('Active now') })] })] })] }))] }), _jsx(DialogFooter, { className: "px-5 py-3 bg-[rgb(var(--bg-subtle))] border-t border-[rgb(var(--bd-default))]", children: _jsxs("div", { className: "flex items-center gap-2.5 w-full", children: [_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: [_jsx(XCircle, { className: "h-3.5 w-3.5" }), t('Cancel')] }), _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: [_jsx(LogOut, { className: "h-3.5 w-3.5" }), t('Log Out')] })] }) })] }) }));
+}

package/dist/components/modals/modal-alert.d.ts

@@ -0,0 +1,139 @@
+import * as React from 'react';
+export declare const ALERT_TOKENS: {
+    colors: {
+        success: {
+            bg: string;
+            border: string;
+            icon: string;
+            title: string;
+            description: string;
+            primaryButton: string;
+            secondaryButton: string;
+        };
+        error: {
+            bg: string;
+            border: string;
+            icon: string;
+            title: string;
+            description: string;
+            primaryButton: string;
+            secondaryButton: string;
+        };
+        warning: {
+            bg: string;
+            border: string;
+            icon: string;
+            title: string;
+            description: string;
+            primaryButton: string;
+            secondaryButton: string;
+        };
+        info: {
+            bg: string;
+            border: string;
+            icon: string;
+            title: string;
+            description: string;
+            primaryButton: string;
+            secondaryButton: string;
+        };
+        confirmation: {
+            bg: string;
+            border: string;
+            icon: string;
+            title: string;
+            description: string;
+            primaryButton: string;
+            secondaryButton: string;
+        };
+        critical: {
+            bg: string;
+            border: string;
+            icon: string;
+            title: string;
+            description: string;
+            primaryButton: string;
+            secondaryButton: string;
+        };
+        loading: {
+            bg: string;
+            border: string;
+            icon: string;
+            title: string;
+            description: string;
+            primaryButton: string;
+            secondaryButton: string;
+        };
+    };
+    spacing: {
+        padding: string;
+        gap: string;
+        iconSize: string;
+        buttonPadding: string;
+        borderRadius: string;
+    };
+    typography: {
+        title: string;
+        description: string;
+        button: string;
+    };
+    animations: {
+        overlay: string;
+        content: string;
+    };
+};
+export type AlertType = 'success' | 'error' | 'warning' | 'info' | 'confirmation' | 'critical' | 'loading';
+export interface AlertAction {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+}
+export interface ModalAlertProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    type: AlertType;
+    title: string;
+    description: string;
+    actions?: AlertAction[];
+    showCloseButton?: boolean;
+    autoClose?: number;
+    preventClose?: boolean;
+    className?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+export declare function ModalAlert({ open, onOpenChange, type, title, description, actions, showCloseButton, autoClose, preventClose, className, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, ...props }: ModalAlertProps): React.JSX.Element;
+export declare const SuccessAlert: (props: Omit<ModalAlertProps, "type">) => React.JSX.Element;
+export declare const ErrorAlert: (props: Omit<ModalAlertProps, "type">) => React.JSX.Element;
+export declare const WarningAlert: (props: Omit<ModalAlertProps, "type">) => React.JSX.Element;
+export declare const InfoAlert: (props: Omit<ModalAlertProps, "type">) => React.JSX.Element;
+export declare const ConfirmationAlert: (props: Omit<ModalAlertProps, "type">) => React.JSX.Element;
+export declare const CriticalAlert: (props: Omit<ModalAlertProps, "type">) => React.JSX.Element;
+export declare const LoadingAlert: (props: Omit<ModalAlertProps, "type">) => React.JSX.Element;
+export declare function useModalAlert(): {
+    alert: {
+        open: boolean;
+        type: AlertType;
+        title: string;
+        description: string;
+        actions?: AlertAction[];
+        autoClose?: number;
+    };
+    showAlert: (params: Omit<{
+        open: boolean;
+        type: AlertType;
+        title: string;
+        description: string;
+        actions?: AlertAction[];
+        autoClose?: number;
+    }, "open">) => void;
+    hideAlert: () => void;
+    showSuccess: (title: string, description: string, autoClose?: number) => void;
+    showError: (title: string, description: string) => void;
+    showWarning: (title: string, description: string, actions?: AlertAction[]) => void;
+    showInfo: (title: string, description: string, autoClose?: number) => void;
+    showConfirmation: (title: string, description: string, onConfirm: () => void, onCancel?: () => void) => void;
+    showLoading: (title: string, description: string) => void;
+    AlertComponent: () => React.JSX.Element;
+};

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

@@ -0,0 +1,250 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cn } from '../../lib/utils.js';
+import { CheckCircle, XCircle, AlertTriangle, Info, HelpCircle, AlertCircle, Loader2, X, Clock } from 'lucide-react';
+import { Loading } from '../ui/overlays/loading.js';
+// Design Tokens
+export const 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: CheckCircle,
+    error: XCircle,
+    warning: AlertTriangle,
+    info: Info,
+    confirmation: HelpCircle,
+    critical: AlertCircle,
+    loading: Loader2
+};
+export function ModalAlert({ open, onOpenChange, type, title, description, actions = [], showCloseButton = true, autoClose, preventClose = false, className, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, ...props }) {
+    const colors = 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 (_jsx(DialogPrimitive.Root, { open: open, onOpenChange: handleOpenChange, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: cn('fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm', ALERT_TOKENS.animations.overlay) }), _jsxs(DialogPrimitive.Content, { className: 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, ALERT_TOKENS.spacing.borderRadius, 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: [_jsx(DialogPrimitive.Title, { className: "sr-only", children: title }), _jsxs("div", { className: cn(ALERT_TOKENS.spacing.padding), children: [showCloseButton && !preventClose && !isLoading && (_jsxs("button", { type: "button", onClick: (e) => { e.stopPropagation(); onOpenChange(false); }, className: 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: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })), _jsxs("div", { className: cn('flex', ALERT_TOKENS.spacing.gap), children: [_jsx("div", { className: "flex-shrink-0", children: isLoading ? (
+                                            // Our custom bouncing dots animation for loading
+                                            _jsx("div", { className: "w-8 h-8 flex items-center justify-center", children: _jsx(Loading, { variant: "dots", size: "md", color: colors.icon }) })) : (_jsx(IconComponent, { className: cn(ALERT_TOKENS.spacing.iconSize, colors.icon), "aria-hidden": "true" })) }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx("h4", { className: cn(ALERT_TOKENS.typography.title, colors.title), children: title }), _jsx("p", { id: "alert-description", className: cn(ALERT_TOKENS.typography.description, colors.description, 'break-words whitespace-pre-line'), children: description }), autoClose && open && !preventClose && (_jsxs("div", { className: "flex items-center gap-1 text-xs opacity-70", children: [_jsx(Clock, { className: "w-3 h-3" }), _jsxs("span", { children: ["Auto-closing in ", Math.ceil(autoClose / 1000), "s"] })] })), defaultActions.length > 0 && (_jsx("div", { className: "flex gap-2 pt-4 justify-end", children: defaultActions.map((action, index) => (_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: 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', ALERT_TOKENS.spacing.buttonPadding, ALERT_TOKENS.typography.button, action.variant === 'primary'
+                                                            ? colors.primaryButton
+                                                            : colors.secondaryButton), children: action.label }, index))) }))] })] })] })] })] }) }));
+}
+// Preset Alert Components for Common Use Cases
+export const SuccessAlert = (props) => (_jsx(ModalAlert, { type: "success", ...props }));
+export const ErrorAlert = (props) => (_jsx(ModalAlert, { type: "error", ...props }));
+export const WarningAlert = (props) => (_jsx(ModalAlert, { type: "warning", ...props }));
+export const InfoAlert = (props) => (_jsx(ModalAlert, { type: "info", ...props }));
+export const ConfirmationAlert = (props) => (_jsx(ModalAlert, { type: "confirmation", ...props }));
+export const CriticalAlert = (props) => (_jsx(ModalAlert, { type: "critical", preventClose: true, ...props }));
+export const LoadingAlert = (props) => (_jsx(ModalAlert, { type: "loading", preventClose: true, showCloseButton: false, ...props }));
+// Hook for managing alert state
+export 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(() => (_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/components/modals/password-reset-modal.d.ts

@@ -0,0 +1,11 @@
+interface PasswordResetModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    email: string;
+    otpCode: string;
+    companyUsername?: string;
+    companyPassword?: string;
+    onSuccess: () => void;
+}
+export declare function PasswordResetModal({ isOpen, onClose, email, otpCode, onSuccess, }: PasswordResetModalProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,109 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Modal, ModalContent, ModalHeader, ModalTitle, } from './Modal.js';
+import { Input } from '../ui/forms/input.js';
+import { Eye, EyeOff, Lock, Check, X } from 'lucide-react';
+import { useGlobalAlert } from '../../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) },
+];
+export function PasswordResetModal({ isOpen, onClose, email, otpCode, onSuccess, }) {
+    const alerts = useGlobalAlert();
+    const [newPassword, setNewPassword] = useState('');
+    const [retypePassword, setRetypePassword] = useState('');
+    const [showNewPassword, setShowNewPassword] = useState(false);
+    const [showRetypePassword, setShowRetypePassword] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [passwordStrength, setPasswordStrength] = 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 (_jsx(Modal, { open: isOpen, onOpenChange: handleClose, children: _jsxs(ModalContent, { size: "sm", className: "p-0", children: [_jsx(ModalHeader, { className: "sr-only", children: _jsx(ModalTitle, { children: "Reset Password" }) }), _jsxs("div", { className: "p-4 sm:p-6 max-h-[100dvh] overflow-y-auto", children: [_jsxs("div", { className: "text-center mb-5 sm:mb-6", children: [_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: _jsx(Lock, { className: "h-6 w-6 sm:h-7 sm:w-7 text-[rgb(var(--color-primary))]" }) }), _jsx("h2", { className: "text-xl sm:text-2xl font-bold text-[rgb(var(--fg-default))] mb-2", children: "Create New Password" }), _jsxs("p", { className: "text-xs sm:text-sm text-[rgb(var(--fg-muted))] break-words", children: ["Resetting password for ", _jsx("span", { className: "font-medium text-[rgb(var(--fg-default))]", children: email }), ". Your new password must be different from previously used passwords."] })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "newPassword", className: "block text-sm font-medium text-[rgb(var(--fg-default))] mb-1.5", children: "New Password" }), _jsxs("div", { className: "relative", children: [_jsx(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" }), _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 ? _jsx(EyeOff, { className: "h-5 w-5" }) : _jsx(Eye, { className: "h-5 w-5" }) })] }), newPassword && (_jsxs("div", { className: "mt-2", children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "Password strength" }), _jsx("span", { className: `text-xs font-medium ${passwordStrength <= 1 ? 'text-red-600' : passwordStrength <= 2 ? 'text-yellow-600' : 'text-green-600'}`, children: getStrengthLabel() })] }), _jsx("div", { className: "h-1.5 w-full bg-[rgb(var(--bg-hover))] rounded-full overflow-hidden", children: _jsx("div", { className: `h-full transition-all duration-300 ${getStrengthColor()}`, style: { width: `${(passwordStrength / 4) * 100}%` } }) })] }))] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "retypePassword", className: "block text-sm font-medium text-[rgb(var(--fg-default))] mb-1.5", children: "Confirm Password" }), _jsxs("div", { className: "relative", children: [_jsx(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" }), _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 ? _jsx(EyeOff, { className: "h-5 w-5" }) : _jsx(Eye, { className: "h-5 w-5" }) })] }), retypePassword && (_jsx("div", { className: "mt-2 flex items-center gap-1.5", children: newPassword === retypePassword ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-4 w-4 text-green-600" }), _jsx("span", { className: "text-xs text-green-600 font-medium", children: "Passwords match" })] })) : (_jsxs(_Fragment, { children: [_jsx(X, { className: "h-4 w-4 text-red-600" }), _jsx("span", { className: "text-xs text-red-600 font-medium", children: "Passwords do not match" })] })) }))] }), _jsxs("div", { className: "bg-[rgb(var(--bg-hover))] rounded-lg p-3 sm:p-4 border border-[rgb(var(--bd-default))]", children: [_jsx("p", { className: "text-sm font-medium text-[rgb(var(--fg-default))] mb-2 sm:mb-3", children: "Password Requirements" }), _jsx("div", { className: "space-y-2", children: passwordRequirements.map((req, index) => {
+                                                const isPassed = req.test(newPassword);
+                                                return (_jsxs("div", { className: "flex items-center gap-2", children: [_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 && _jsx(Check, { className: "h-3 w-3 text-green-600" }) }), _jsx("span", { className: `text-xs ${isPassed ? 'text-green-700' : 'text-[rgb(var(--fg-muted))]'}`, children: req.label })] }, index));
+                                            }) })] })] }), _jsxs("div", { className: "flex gap-2 sm:gap-3 mt-5 sm:mt-6", children: [_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" }), _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/components/modals/session-expiry-warning.d.ts

@@ -0,0 +1,12 @@
+interface SessionExpiryWarningProps {
+    isOpen: boolean;
+    onExtend: () => void;
+    onLogout: () => void;
+    minutesRemaining: number;
+}
+/**
+ * Modal to warn users when their session is about to expire.
+ * Gives them the option to extend the session or logout immediately.
+ */
+export declare function SessionExpiryWarning({ isOpen, onExtend, onLogout, minutesRemaining }: SessionExpiryWarningProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/index.js";
+import { Button } from "../ui/index.js";
+import { AlertTriangle, Clock, LogOut, RefreshCw } from "lucide-react";
+import { useOptionalLanguage } from "../../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.
+ */
+export function SessionExpiryWarning({ isOpen, onExtend, onLogout, minutesRemaining }) {
+    const { t } = useOptionalLanguage();
+    const minuteLabel = minutesRemaining === 1 ? t('minute') : t('minutes');
+    return (_jsx(Dialog, { open: isOpen, onOpenChange: () => { }, children: _jsxs(DialogContent, { className: "max-w-md", hideCloseButton: true, children: [_jsx(DialogHeader, { className: "border-b border-[rgb(var(--bd-default))] pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-10 w-10 rounded-full bg-[rgb(var(--color-warning)/0.12)] flex items-center justify-center", children: _jsx(AlertTriangle, { className: "h-5 w-5 text-[rgb(var(--color-warning))]" }) }), _jsx(DialogTitle, { className: "text-lg font-semibold text-[rgb(var(--fg-default))]", children: t('Session Expiring Soon') })] }) }), _jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex items-center gap-3 p-4 rounded-lg bg-[rgb(var(--bg-subtle))] border border-[rgb(var(--bd-default))]", children: [_jsx(Clock, { className: "h-5 w-5 text-[rgb(var(--color-icon))]" }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: t('Time Remaining') }), _jsxs("p", { className: "text-2xl font-bold text-[rgb(var(--color-warning))]", children: [minutesRemaining, " ", minuteLabel] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("p", { className: "text-sm text-[rgb(var(--fg-default))]", children: [t('Your session will expire in'), " ", _jsxs("span", { className: "font-semibold text-[rgb(var(--color-warning))]", children: [minutesRemaining, " ", minuteLabel] }), "."] }), _jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: t('Would you like to extend your session and continue working?') })] }), _jsx("div", { className: "p-3 rounded-lg bg-[rgb(var(--color-warning)/0.08)] border border-[rgb(var(--color-warning)/0.2)]", children: _jsxs("p", { className: "text-xs text-[rgb(var(--color-warning-hover))]", children: [_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.")] }) })] }), _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: [_jsx(Button, { variant: "action-delete", icon: LogOut, onClick: onLogout, children: t('Logout Now') }), _jsx(Button, { variant: "action-apply", icon: RefreshCw, onClick: onExtend, children: t('Extend Session') })] })] }) }));
+}

package/dist/components/providers/api-provider.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface APIContextType {
+    initialized: boolean;
+}
+export declare function useAPI(): APIContextType;
+interface APIProviderProps {
+    children: ReactNode;
+}
+export declare function APIProvider({ children }: APIProviderProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, createContext, useContext } from 'react';
+import { initializeAPI } from '../../lib/api/index.js';
+const APIContext = createContext({ initialized: false });
+export function useAPI() {
+    return useContext(APIContext);
+}
+export function APIProvider({ children }) {
+    useEffect(() => {
+        // Initialize API configuration when the component mounts
+        initializeAPI();
+    }, []);
+    return (_jsx(APIContext.Provider, { value: { initialized: true }, children: children }));
+}

package/dist/components/providers/query-provider.d.ts

@@ -0,0 +1,3 @@
+export declare function QueryProvider({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;