indas-ui 0.0.1 → 0.1.1

package/dist/cjs/components/modals/Modal.js

@@ -0,0 +1,311 @@
+'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.ModalDescription = exports.ModalTitle = exports.ModalFooter = exports.ModalHeader = exports.ModalContent = exports.ModalTrigger = exports.ModalClose = exports.ModalOverlay = exports.ModalPortal = exports.DialogDescription = exports.DialogTitle = exports.DialogFooter = exports.DialogHeader = exports.DialogContent = exports.DialogOverlay = exports.DialogClose = exports.DialogPortal = exports.DialogTrigger = exports.Dialog = void 0;
+exports.useIsMobile = useIsMobile;
+exports.useModalDepth = useModalDepth;
+exports.Modal = Modal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const DialogPrimitive = __importStar(require("@radix-ui/react-dialog"));
+const lucide_react_1 = require("lucide-react");
+const navigation_1 = require("next/navigation");
+const utils_1 = require("../../lib/utils.js");
+// =============================================================================
+// SIZE PRESETS
+// On mobile (<md): sm/md/lg/xl go full-screen for better usability
+// =============================================================================
+const modalSizes = {
+    sm: 'max-w-md w-full mx-4 h-auto max-h-[90vh] max-md:max-w-full max-md:h-full max-md:max-h-none max-md:mx-0 max-md:rounded-none',
+    md: 'max-w-lg w-full mx-4 h-auto max-h-[90vh] max-md:max-w-full max-md:h-full max-md:max-h-none max-md:mx-0 max-md:rounded-none',
+    lg: 'max-w-2xl w-full mx-4 h-auto max-h-[90vh] max-md:max-w-full max-md:h-full max-md:max-h-none max-md:mx-0 max-md:rounded-none',
+    xl: 'max-w-4xl w-full mx-4 h-auto max-h-[90vh] max-md:max-w-full max-md:h-full max-md:max-h-none max-md:mx-0 max-md:rounded-none',
+    master: 'w-[90vw] h-[90vh] max-w-none max-md:w-full max-md:h-full max-md:rounded-none',
+    fullscreen: 'w-[98vw] h-[98vh] max-w-none'
+};
+// =============================================================================
+// HOOKS
+// =============================================================================
+/**
+ * SSR-safe mobile detection hook
+ * @param breakpoint - Pixel width threshold (default 768)
+ */
+function useIsMobile(breakpoint = 768) {
+    const [isMobile, setIsMobile] = React.useState(false);
+    React.useEffect(() => {
+        const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
+        setIsMobile(mq.matches);
+        const handler = (e) => setIsMobile(e.matches);
+        mq.addEventListener('change', handler);
+        return () => mq.removeEventListener('change', handler);
+    }, [breakpoint]);
+    return isMobile;
+}
+/**
+ * Stable ref wrapper — prevents React 19 infinite update loop caused by
+ * @radix-ui/react-presence creating a new callback ref every render.
+ */
+function useStableRef(forwardedRef) {
+    const forwardedRefRef = React.useRef(forwardedRef);
+    React.useEffect(() => { forwardedRefRef.current = forwardedRef; });
+    const stableCallback = React.useCallback((node) => {
+        const ref = forwardedRefRef.current;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, []);
+    return stableCallback;
+}
+// =============================================================================
+// MODAL CONTEXT — lets ModalTitle register its text for the mobile page header
+// =============================================================================
+const ModalMobileContext = React.createContext({ isMobilePage: false });
+// =============================================================================
+// CORE COMPONENTS
+// =============================================================================
+/**
+ * Nesting depth of the current modal. A modal rendered inside another modal's
+ * React tree reads its parent's depth + 1. Used to stack z-index and to let
+ * only the innermost modal own the device back button.
+ */
+const ModalDepthContext = React.createContext(0);
+/** Lets a nested modal tell its parent it is open (+1) or closed (-1). */
+const ModalChildRegistryContext = React.createContext(null);
+/** Reads whether THIS modal currently has an open child modal. */
+const ModalHasOpenChildContext = React.createContext(null);
+/** Monotonic id so each modal can recognise the history entry it pushed. */
+let modalSentinelSeq = 0;
+function useModalDepth() {
+    return React.useContext(ModalDepthContext);
+}
+/**
+ * Modal wrapper — intercepts the device back button in standalone PWA mode.
+ * When a modal opens, a history entry is pushed. Pressing the device back
+ * button fires `popstate` which closes the modal instead of navigating away.
+ */
+function Modal({ open, onOpenChange, ...props }) {
+    const parentDepth = React.useContext(ModalDepthContext);
+    const depth = parentDepth + 1;
+    // Most controlled call sites pass `onOpenChange={onClose}` — a 0-arg handler
+    // that ignores the boolean, so a Radix-fired onOpenChange(true) would read as
+    // "close". For controlled modals the parent already owns `open`, so only the
+    // close transition needs forwarding. Uncontrolled (trigger-driven) modals must
+    // still receive `true` or they never open.
+    const isControlled = open !== undefined;
+    const handleOpenChange = React.useCallback((next) => {
+        if (isControlled && next)
+            return;
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const openRef = React.useRef(open);
+    const onOpenChangeRef = React.useRef(handleOpenChange);
+    openRef.current = open;
+    onOpenChangeRef.current = handleOpenChange;
+    // Tracks how many child modals are open beneath this one, so Escape and
+    // outside-clicks are handled by the innermost modal only. (The back button is
+    // handled separately, by sentinel id — a counter is cleared too early to be
+    // reliable there.)
+    const childOpenCountRef = React.useRef(0);
+    const registerChild = React.useContext(ModalChildRegistryContext);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        registerChild?.(1);
+        return () => { registerChild?.(-1); };
+    }, [open, registerChild]);
+    const childRegistry = React.useCallback((delta) => {
+        childOpenCountRef.current += delta;
+    }, []);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        // Only manage history on mobile — desktop doesn't need back-button interception
+        const isMobileDevice = window.matchMedia('(max-width: 768px)').matches;
+        if (!isMobileDevice)
+            return;
+        // Push a sentinel tagged with THIS modal's identity, so we can tell our own
+        // dismissal apart from a nested child retracting its entry. Without the id
+        // the parent closes too when a child modal applies or cancels.
+        const id = ++modalSentinelSeq;
+        window.history.pushState({ __modal: true, __modalId: id }, '');
+        let selfPopped = false;
+        const onPopState = () => {
+            // React only when OUR sentinel is the one that just left the stack.
+            // After a child pops its own entry ours becomes top-of-stack again —
+            // that means we survived, not that we were dismissed.
+            const state = window.history.state;
+            if (state && state.__modal && state.__modalId === id)
+                return;
+            // Our entry is gone and no deeper modal owns the new top: this is a real
+            // back-button press aimed at us.
+            if (childOpenCountRef.current > 0)
+                return;
+            selfPopped = true;
+            if (openRef.current) {
+                onOpenChangeRef.current?.(false);
+            }
+        };
+        window.addEventListener('popstate', onPopState);
+        return () => {
+            window.removeEventListener('popstate', onPopState);
+            // Closing normally (Apply / Cancel / X) — retract our own sentinel so the
+            // history stack doesn't grow. If the back button already popped it,
+            // calling back() again would navigate the real page away.
+            if (selfPopped)
+                return;
+            const state = window.history.state;
+            if (state && state.__modal && state.__modalId === id) {
+                window.history.back();
+            }
+        };
+    }, [open]);
+    return ((0, jsx_runtime_1.jsx)(ModalHasOpenChildContext.Provider, { value: childOpenCountRef, children: (0, jsx_runtime_1.jsx)(ModalDepthContext.Provider, { value: depth, children: (0, jsx_runtime_1.jsx)(ModalChildRegistryContext.Provider, { value: childRegistry, children: (0, jsx_runtime_1.jsx)(DialogPrimitive.Root, { open: open, onOpenChange: handleOpenChange, ...props }) }) }) }));
+}
+/**
+ * ADAPTIVE TRIGGER
+ *
+ * On desktop: opens the modal dialog as normal.
+ * On mobile + mobilePageUrl: navigates to a dedicated page instead,
+ * so users get native back-button support and full-screen real estate.
+ */
+const ModalTrigger = React.forwardRef(({ className, mobilePageUrl, onMobileNavigate, mobileBreakpoint = 768, onClick, ...props }, ref) => {
+    const router = (0, navigation_1.useRouter)();
+    const handleClick = (e) => {
+        if (mobilePageUrl && typeof window !== 'undefined') {
+            const isMobile = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`).matches;
+            if (isMobile) {
+                e.preventDefault();
+                e.stopPropagation();
+                onMobileNavigate?.(mobilePageUrl);
+                router.push(mobilePageUrl);
+                return;
+            }
+        }
+        onClick?.(e);
+    };
+    return ((0, jsx_runtime_1.jsx)(DialogPrimitive.Trigger, { ref: ref, className: className, onClick: handleClick, ...props }));
+});
+exports.ModalTrigger = ModalTrigger;
+ModalTrigger.displayName = "ModalTrigger";
+const ModalPortal = DialogPrimitive.Portal;
+exports.ModalPortal = ModalPortal;
+const ModalClose = DialogPrimitive.Close;
+exports.ModalClose = ModalClose;
+// Overlay with backdrop blur
+const ModalOverlay = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Overlay, { ref: ref, className: (0, utils_1.cn)("fixed inset-0 z-[100] bg-black/50 backdrop-blur-[2px]", 
+    // z-index may be overridden inline by ModalContent for nested modals
+    className), ...props })));
+exports.ModalOverlay = ModalOverlay;
+ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
+/**
+ * ADAPTIVE MODAL CONTENT
+ *
+ * Desktop: standard Radix dialog overlay (unchanged)
+ * Mobile: renders as a full-screen page with a back-arrow header.
+ *         No Radix overlay/portal — just a fixed div on top of everything.
+ *         ModalHeader/ModalTitle inside become the page header automatically.
+ */
+const ModalContent = React.forwardRef(({ className, children, hideCloseButton, disableOutsideClick, size, style, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const stableRef = useStableRef(ref);
+    const isMobile = useIsMobile();
+    // Nested modals must paint above their parent. Radix portals every modal to
+    // <body>, so equal z-index makes stacking fall back to DOM order and the
+    // child renders behind / overlapping the parent.
+    const depth = useModalDepth();
+    const zIndex = 100 + (depth - 1) * 10;
+    // Radix delivers Escape to every open Dialog. Without this, closing a nested
+    // modal with Escape also closes its parent.
+    const hasOpenChild = React.useContext(ModalHasOpenChildContext);
+    const handleEscapeKeyDown = React.useCallback((e) => {
+        if (hasOpenChild && hasOpenChild.current > 0)
+            e.preventDefault();
+    }, [hasOpenChild]);
+    // On mobile: render as a full-screen page
+    if (isMobile) {
+        return ((0, jsx_runtime_1.jsx)(DialogPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(DialogPrimitive.Content, { ref: stableRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: (0, utils_1.cn)("fixed inset-0 flex flex-col", "bg-[rgb(var(--bg-surface))]", className), 
+                // Always block outside click on mobile — there's nothing "outside"
+                onInteractOutside: (e) => e.preventDefault(), onEscapeKeyDown: handleEscapeKeyDown, ...props, children: (0, jsx_runtime_1.jsx)(ModalMobileContext.Provider, { value: { isMobilePage: true, onClose: undefined }, children: children }) }) }));
+    }
+    // Desktop: unchanged Radix dialog
+    return ((0, jsx_runtime_1.jsxs)(ModalPortal, { children: [(0, jsx_runtime_1.jsx)(ModalOverlay, { style: { zIndex: zIndex - 1 } }), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: stableRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: (0, utils_1.cn)("fixed left-[50%] top-[50%] grid translate-x-[-50%] translate-y-[-50%]", "border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] shadow-lg", "rounded-lg sm:rounded-lg", size ? modalSizes[size] : "max-w-lg w-full mx-4 h-auto max-h-[85vh]", 
+                // Gap + padding only for standard modals — fullscreen/master/p-0 modals
+                // run their own flush header/body/footer layout, so the gap shows as bands.
+                size !== 'master' && size !== 'fullscreen' && !className?.includes('p-0') && "gap-3 sm:gap-4 p-4 sm:p-6", className), onInteractOutside: (e) => {
+                    // A nested modal is open — clicks belong to it, not the parent.
+                    if (disableOutsideClick || (hasOpenChild && hasOpenChild.current > 0)) {
+                        e.preventDefault();
+                    }
+                }, onEscapeKeyDown: handleEscapeKeyDown, ...props, children: [children, !hideCloseButton && ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: "absolute right-2 top-2 sm:right-4 sm:top-4 rounded-sm opacity-70 ring-offset-[rgb(var(--bg-surface))] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))] focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-[rgb(var(--bg-hover))] data-[state=open]:text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4 sm:h-5 sm:w-5 text-[rgb(var(--color-icon))]" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] }))] })] }));
+});
+exports.ModalContent = ModalContent;
+ModalContent.displayName = DialogPrimitive.Content.displayName;
+/**
+ * ADAPTIVE HEADER
+ *
+ * Desktop: renders as normal header div
+ * Mobile page mode: renders as a sticky top bar with a back arrow (ChevronLeft)
+ *                   that closes the modal, plus the title inline
+ */
+const ModalHeader = ({ className, children, ...props }) => {
+    const { isMobilePage } = React.useContext(ModalMobileContext);
+    if (isMobilePage) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-2 px-2 py-3 border-b border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] shrink-0", className), ...props, children: [(0, jsx_runtime_1.jsx)(DialogPrimitive.Close, { className: "p-1.5 -ml-1 rounded-lg 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.ChevronLeft, { className: "h-5 w-5" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-w-0", children: children })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props, children: children }));
+};
+exports.ModalHeader = ModalHeader;
+ModalHeader.displayName = "ModalHeader";
+const ModalFooter = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
+exports.ModalFooter = ModalFooter;
+ModalFooter.displayName = "ModalFooter";
+const ModalTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Title, { ref: ref, className: (0, utils_1.cn)("text-lg font-semibold leading-none tracking-tight text-[rgb(var(--fg-default))]", className), ...props })));
+exports.ModalTitle = ModalTitle;
+ModalTitle.displayName = DialogPrimitive.Title.displayName;
+const ModalDescription = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Description, { ref: ref, className: (0, utils_1.cn)("text-sm text-[rgb(var(--fg-muted))]", className), ...props })));
+exports.ModalDescription = ModalDescription;
+ModalDescription.displayName = DialogPrimitive.Description.displayName;
+// Backwards compatibility aliases
+exports.Dialog = Modal;
+exports.DialogTrigger = ModalTrigger;
+exports.DialogPortal = ModalPortal;
+exports.DialogClose = ModalClose;
+exports.DialogOverlay = ModalOverlay;
+exports.DialogContent = ModalContent;
+exports.DialogHeader = ModalHeader;
+exports.DialogFooter = ModalFooter;
+exports.DialogTitle = ModalTitle;
+exports.DialogDescription = ModalDescription;

package/dist/cjs/components/modals/StandardModal.js

@@ -0,0 +1,28 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StandardModal = StandardModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const ui_1 = require("../ui/index.js");
+const footer_1 = require("../layout/footer.js");
+const utils_1 = require("../../lib/utils.js");
+const sizeClasses = {
+    sm: 'w-[500px] h-[400px]',
+    md: 'w-[700px] h-[600px]',
+    lg: 'w-[90vw] h-[80vh]',
+    xl: 'w-[95vw] h-[90vh]',
+    full: 'w-[98vw] h-[98vh]'
+};
+function StandardModal({ isOpen, onClose, title, subtitle, badge, children, size = 'lg', className, showFooter = true, footerActions, onSave, onCancel, saveLabel = 'Save', cancelLabel = 'Cancel', saveIcon: SaveIcon = lucide_react_1.Save, cancelIcon: CancelIcon = lucide_react_1.XCircle, saving = false, ariaDescribedBy = 'modal-description', ariaDescription }) {
+    const handleCancel = () => {
+        if (onCancel) {
+            onCancel();
+        }
+        else {
+            onClose();
+        }
+    };
+    const defaultFooterActions = (onSave || onCancel) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "action-cancel", onClick: handleCancel, icon: CancelIcon, disabled: saving, children: cancelLabel }), onSave && ((0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "action-save", onClick: onSave, icon: SaveIcon, disabled: saving, children: saving ? 'Saving...' : saveLabel }))] }));
+    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)('max-w-none bg-[rgb(var(--bg-surface))] p-0 flex flex-col overflow-hidden', sizeClasses[size], className), hideCloseButton: true, "aria-describedby": ariaDescribedBy, children: [(0, jsx_runtime_1.jsxs)(ui_1.DialogHeader, { className: "flex-shrink-0 px-6 pt-3 pb-2 border-b border-[rgb(var(--bd-default))] bg-gradient-to-r from-blue-50 to-indigo-50", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.DialogTitle, { className: "text-lg font-semibold text-[rgb(var(--fg-default))]", children: title }), subtitle && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))] mt-1", children: subtitle }))] }), badge && ((0, jsx_runtime_1.jsx)(ui_1.Badge, { variant: badge.variant || 'outline', className: "text-sm", children: badge.label }))] }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "close-btn-md hover:bg-[rgb(var(--bg-subtle))] rounded transition-colors p-1", "aria-label": "Close modal", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5 text-[rgb(var(--fg-default))]" }) })] }), ariaDescription && ((0, jsx_runtime_1.jsx)("div", { id: ariaDescribedBy, className: "sr-only", children: ariaDescription }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: children }), showFooter && ((0, jsx_runtime_1.jsx)(footer_1.Footer, { variant: "modal", gradient: true, actions: footerActions || defaultFooterActions }))] }) }));
+}

package/dist/cjs/components/modals/api-config-modal.js

@@ -0,0 +1,120 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.APIConfigModal = APIConfigModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("../ui/index.js");
+const lucide_react_1 = require("lucide-react");
+const StandardModal_1 = require("./StandardModal.js");
+const api_1 = require("../../lib/api/index.js");
+function APIConfigModal({ isOpen, onClose, onConfigured }) {
+    const [baseURL, setBaseURL] = (0, react_1.useState)('');
+    const [authEndpoint, setAuthEndpoint] = (0, react_1.useState)('');
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)('');
+    const [success, setSuccess] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            // Load existing configuration
+            const config = (0, api_1.getAuthAPIConfig)();
+            if (config) {
+                setBaseURL(config.baseURL);
+                setAuthEndpoint(config.authEndpoint || '/api/GetLoginDetails');
+            }
+            else {
+                // Set default values
+                setBaseURL('');
+                setAuthEndpoint('/api/GetLoginDetails');
+            }
+            setError('');
+            setSuccess(false);
+        }
+    }, [isOpen]);
+    const handleSave = async () => {
+        setIsLoading(true);
+        setError('');
+        setSuccess(false);
+        try {
+            // Validate inputs
+            if (!baseURL.trim()) {
+                throw new Error('Base URL is required');
+            }
+            if (!authEndpoint.trim()) {
+                throw new Error('Auth endpoint is required');
+            }
+            // Test the configuration by making a request to the configure endpoint
+            const response = await fetch('/api/auth/configure', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    baseURL: baseURL.trim(),
+                    authEndpoint: authEndpoint.trim()
+                })
+            });
+            const result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error || 'Failed to configure API');
+            }
+            setSuccess(true);
+            setTimeout(() => {
+                onConfigured?.();
+                onClose();
+            }, 1500);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Configuration failed');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const handleClear = async () => {
+        try {
+            (0, api_1.clearAuthAPIConfig)();
+            setBaseURL('');
+            setAuthEndpoint('/api/GetLoginDetails');
+            setSuccess(false);
+            setError('');
+        }
+        catch (err) {
+            setError('Failed to clear configuration');
+        }
+    };
+    const handleTestConnection = async () => {
+        if (!baseURL.trim()) {
+            setError('Please enter a base URL first');
+            return;
+        }
+        setIsLoading(true);
+        setError('');
+        try {
+            const testUrl = baseURL.trim().replace(/\/$/, '') + '/api/test';
+            const response = await fetch(testUrl, {
+                method: 'GET',
+                signal: AbortSignal.timeout(5000)
+            });
+            if (response.ok) {
+                setSuccess(true);
+                setTimeout(() => setSuccess(false), 3000);
+            }
+            else {
+                setError(`Server responded with ${response.status}: ${response.statusText}`);
+            }
+        }
+        catch (err) {
+            if (err instanceof Error && err.name === 'AbortError') {
+                setError('Connection test timed out');
+            }
+            else {
+                setError('Unable to connect to server');
+            }
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(StandardModal_1.StandardModal, { isOpen: isOpen, onClose: onClose, title: "Configure API Authentication", subtitle: "Set up the base URL and authentication endpoint for API requests", size: "md", onSave: handleSave, onCancel: onClose, saveLabel: "Save Configuration", saving: isLoading, footerActions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "action-secondary", onClick: handleTestConnection, disabled: isLoading || !baseURL.trim(), icon: lucide_react_1.TestTube, children: isLoading ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }) : 'Test Connection' }), (0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "action-secondary", onClick: handleClear, disabled: isLoading, children: "Clear" }), (0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "action-save", onClick: handleSave, disabled: isLoading || !baseURL.trim() || !authEndpoint.trim(), children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Saving..."] })) : ('Save Configuration') })] }), ariaDescription: "Configure API authentication settings including base URL and authentication endpoint", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "baseURL", className: "text-[rgb(var(--fg-default))]", children: "Base URL" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "baseURL", placeholder: "https://your-api-domain.com", value: baseURL, onChange: (e) => setBaseURL(e.target.value), disabled: isLoading, className: "bg-[rgb(var(--bg-surface))] border-[rgb(var(--bd-default))] text-[rgb(var(--fg-default))]" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "The base URL of your API server (e.g., https://api.indusanalytics.co.in)" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "authEndpoint", className: "text-[rgb(var(--fg-default))]", children: "Authentication Endpoint" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "authEndpoint", placeholder: "/api/GetLoginDetails", value: authEndpoint, onChange: (e) => setAuthEndpoint(e.target.value), disabled: isLoading, className: "bg-[rgb(var(--bg-surface))] border-[rgb(var(--bd-default))] text-[rgb(var(--fg-default))]" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "The endpoint path for authentication (default: /api/GetLoginDetails)" })] }), error && ((0, jsx_runtime_1.jsxs)(ui_1.Alert, { variant: "destructive", className: "border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)(ui_1.AlertDescription, { children: error })] })), success && ((0, jsx_runtime_1.jsxs)(ui_1.Alert, { className: "border-[rgb(var(--bd-default))] bg-green-50", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle, { className: "h-4 w-4 text-green-600" }), (0, jsx_runtime_1.jsx)(ui_1.AlertDescription, { className: "text-green-800", children: "Configuration saved successfully!" })] }))] }) }));
+}

package/dist/cjs/components/modals/global-api-config-modal.js

@@ -0,0 +1,127 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalAPIConfigModal = GlobalAPIConfigModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("../ui/index.js");
+const lucide_react_1 = require("lucide-react");
+const StandardModal_1 = require("./StandardModal.js");
+const api_1 = require("../../lib/api/index.js");
+const api_2 = require("../../lib/api/index.js");
+function GlobalAPIConfigModal({ isOpen, onClose, onConfigured }) {
+    const [baseURL, setBaseURL] = (0, react_1.useState)('');
+    const [username, setUsername] = (0, react_1.useState)('');
+    const [password, setPassword] = (0, react_1.useState)('');
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [isTesting, setIsTesting] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)('');
+    const [success, setSuccess] = (0, react_1.useState)(false);
+    const [isConfigured, setIsConfigured] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            // Load existing configuration
+            const config = (0, api_1.getGlobalAPIConfig)();
+            setIsConfigured((0, api_1.isAPIConfigured)());
+            if (config) {
+                setBaseURL(config.baseURL);
+                setUsername(config.username);
+                setPassword(config.password);
+            }
+            else {
+                // Set default values
+                setBaseURL('');
+                setUsername('');
+                setPassword('');
+            }
+            setError('');
+            setSuccess(false);
+            setShowPassword(false);
+        }
+    }, [isOpen]);
+    const handleSave = async () => {
+        setIsLoading(true);
+        setError('');
+        setSuccess(false);
+        try {
+            // Validate inputs
+            if (!baseURL.trim()) {
+                throw new Error('Base URL is required');
+            }
+            if (!username.trim()) {
+                throw new Error('Username is required');
+            }
+            if (!password.trim()) {
+                throw new Error('Password is required');
+            }
+            // Set the global configuration
+            (0, api_1.setGlobalAPIConfig)({
+                baseURL: baseURL.trim(),
+                username: username.trim(),
+                password: password.trim()
+            });
+            setSuccess(true);
+            setIsConfigured(true);
+            setTimeout(() => {
+                onConfigured?.();
+                onClose();
+            }, 1500);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Configuration failed');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const handleClear = async () => {
+        try {
+            (0, api_1.clearGlobalAPIConfig)();
+            setBaseURL('');
+            setUsername('');
+            setPassword('');
+            setSuccess(false);
+            setError('');
+            setIsConfigured(false);
+        }
+        catch (err) {
+            setError('Failed to clear configuration');
+        }
+    };
+    const handleTestConnection = async () => {
+        if (!baseURL.trim() || !username.trim() || !password.trim()) {
+            setError('Please fill in all fields before testing');
+            return;
+        }
+        setIsTesting(true);
+        setError('');
+        try {
+            // Temporarily set the configuration for testing
+            (0, api_1.setGlobalAPIConfig)({
+                baseURL: baseURL.trim(),
+                username: username.trim(),
+                password: password.trim()
+            });
+            // Test the connection
+            const isConnected = await (0, api_2.pingAPI)();
+            if (isConnected) {
+                setSuccess(true);
+                setTimeout(() => setSuccess(false), 3000);
+            }
+            else {
+                setError('Connection test failed - server is not reachable or authentication failed');
+            }
+        }
+        catch (err) {
+            setError('Connection test failed - please check your configuration');
+        }
+        finally {
+            setIsTesting(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(StandardModal_1.StandardModal, { isOpen: isOpen, onClose: onClose, title: "Global API Configuration", subtitle: "Configure base URL and authentication credentials for all API requests", size: "md", badge: isConfigured ? {
+            label: 'Configured',
+            variant: 'default'
+        } : undefined, onSave: handleSave, onCancel: onClose, saveLabel: "Save Configuration", saving: isLoading, footerActions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "action-secondary", onClick: handleTestConnection, disabled: isLoading || isTesting || !baseURL.trim() || !username.trim() || !password.trim(), icon: lucide_react_1.TestTube, children: isTesting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Testing..."] })) : ('Test Connection') }), (0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "action-secondary", onClick: handleClear, disabled: isLoading || isTesting, children: "Clear All" }), (0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "action-save", onClick: handleSave, disabled: isLoading || isTesting || !baseURL.trim() || !username.trim() || !password.trim(), children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Saving..."] })) : ('Save Configuration') })] }), ariaDescription: "Global API configuration for base URL and authentication credentials", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [isConfigured && ((0, jsx_runtime_1.jsxs)(ui_1.Alert, { className: "border-[rgb(var(--bd-default))] bg-green-50", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle, { className: "h-4 w-4 text-green-600" }), (0, jsx_runtime_1.jsx)(ui_1.AlertDescription, { className: "text-green-800", children: "API is currently configured and ready for use." })] })), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsxs)(ui_1.Label, { htmlFor: "baseURL", className: "flex items-center gap-2 text-[rgb(var(--fg-default))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Server, { className: "h-4 w-4 text-[rgb(var(--color-icon))]" }), "Base URL"] }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "baseURL", placeholder: "https://api.my-domain.com/", value: baseURL, onChange: (e) => setBaseURL(e.target.value), disabled: isLoading || isTesting, className: "bg-[rgb(var(--bg-surface))] border-[rgb(var(--bd-default))] text-[rgb(var(--fg-default))]" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "The base domain for all API calls (e.g., https://api.my-domain.com/)" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsxs)(ui_1.Label, { htmlFor: "username", className: "flex items-center gap-2 text-[rgb(var(--fg-default))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.User, { className: "h-4 w-4 text-[rgb(var(--color-icon))]" }), "API Username"] }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "username", placeholder: "your-api-username", value: username, onChange: (e) => setUsername(e.target.value), disabled: isLoading || isTesting, className: "bg-[rgb(var(--bg-surface))] border-[rgb(var(--bd-default))] text-[rgb(var(--fg-default))]" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsxs)(ui_1.Label, { htmlFor: "password", className: "flex items-center gap-2 text-[rgb(var(--fg-default))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { className: "h-4 w-4 text-[rgb(var(--color-icon))]" }), "API Password"] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(ui_1.Input, { id: "password", type: showPassword ? 'text' : 'password', placeholder: "your-api-password", value: password, onChange: (e) => setPassword(e.target.value), disabled: isLoading || isTesting, className: "bg-[rgb(var(--bg-surface))] border-[rgb(var(--bd-default))] text-[rgb(var(--fg-default))]" }), (0, jsx_runtime_1.jsx)(ui_1.Button, { type: "button", variant: "ghost", size: "sm", className: "absolute right-0 top-0 h-full px-3 py-2 hover:bg-[rgb(var(--bg-subtle))]", onClick: () => setShowPassword(!showPassword), disabled: isLoading || isTesting, children: showPassword ? ((0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { className: "h-4 w-4 text-[rgb(var(--color-icon))]" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { className: "h-4 w-4 text-[rgb(var(--color-icon))]" })) })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "Credentials for Basic Authentication (stored securely in session)" })] }), error && ((0, jsx_runtime_1.jsxs)(ui_1.Alert, { variant: "destructive", className: "border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)(ui_1.AlertDescription, { children: error })] })), success && ((0, jsx_runtime_1.jsxs)(ui_1.Alert, { className: "border-[rgb(var(--bd-default))] bg-green-50", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle, { className: "h-4 w-4 text-green-600" }), (0, jsx_runtime_1.jsx)(ui_1.AlertDescription, { className: "text-green-800", children: "Configuration saved successfully!" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "bg-[rgb(var(--bg-subtle))] p-3 rounded-md text-xs border border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium mb-2 text-[rgb(var(--fg-default))]", children: "Usage Information:" }), (0, jsx_runtime_1.jsxs)("ul", { className: "space-y-1 text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)("li", { children: "\u2022 All API calls will use: BASE_URL + \"api/...\"" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Authentication: Basic Auth with provided credentials" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Configuration applies to entire application" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Update once, use everywhere" })] })] })] }) }));
+}

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

@@ -0,0 +1,17 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StandardModal = exports.LogoutModal = exports.ThreeDModal = exports.ImageModal = exports.GlobalAPIConfigModal = exports.APIConfigModal = void 0;
+// Modal components exports
+var api_config_modal_1 = require("./api-config-modal.js");
+Object.defineProperty(exports, "APIConfigModal", { enumerable: true, get: function () { return api_config_modal_1.APIConfigModal; } });
+var global_api_config_modal_1 = require("./global-api-config-modal.js");
+Object.defineProperty(exports, "GlobalAPIConfigModal", { enumerable: true, get: function () { return global_api_config_modal_1.GlobalAPIConfigModal; } });
+var ImageModal_1 = require("./ImageModal.js");
+Object.defineProperty(exports, "ImageModal", { enumerable: true, get: function () { return ImageModal_1.ImageModal; } });
+var _3DModal_1 = require("./3DModal.js");
+Object.defineProperty(exports, "ThreeDModal", { enumerable: true, get: function () { return _3DModal_1.ThreeDModal; } });
+var logout_modal_1 = require("./logout-modal.js");
+Object.defineProperty(exports, "LogoutModal", { enumerable: true, get: function () { return logout_modal_1.LogoutModal; } });
+var StandardModal_1 = require("./StandardModal.js");
+Object.defineProperty(exports, "StandardModal", { enumerable: true, get: function () { return StandardModal_1.StandardModal; } });