indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/forms/unified-currency-dropdown.js

@@ -0,0 +1,202 @@
+'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.UnifiedCurrencyDropdown = UnifiedCurrencyDropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const components_1 = require("../index.js");
+const ui_1 = require("../ui/index.js");
+const ui_2 = require("../ui/index.js");
+const ui_3 = require("../ui/index.js");
+const ui_4 = require("../ui/index.js");
+const ui_5 = require("../ui/index.js");
+const ui_6 = require("../ui/index.js");
+const CurrencyContext_1 = require("../../contexts/CurrencyContext.js");
+function UnifiedCurrencyDropdown({ value, onValueChange, amount = 0, onAmountChange, showRates = true, showConverter = true, allowManualRates = true, className, label = 'Currency', placeholder = 'Select currency', disabled = false, required = false, size = 'md', variant = 'default', validation, error }) {
+    const { selectedCurrency, baseCurrency, exchangeRates, availableCurrencies, isLoading, lastUpdated, error: contextError, setCurrency, refreshRates, convertAmount, formatCurrency, getCurrencyInfo } = (0, CurrencyContext_1.useCurrency)();
+    const [showConverterModal, setShowConverterModal] = React.useState(false);
+    const [validationError, setValidationError] = React.useState(null);
+    const pendingModalRef = React.useRef(false);
+    // Use context currency if no value prop provided
+    const currentCurrency = value || selectedCurrency;
+    // Validation function
+    const validateCurrency = React.useCallback((currency) => {
+        if (validation?.required && !currency) {
+            return 'Currency selection is required';
+        }
+        if (validation?.customValidator) {
+            const customError = validation.customValidator(currency);
+            if (customError)
+                return customError;
+        }
+        return null;
+    }, [validation]);
+    // Validate on currency change
+    React.useEffect(() => {
+        const error = validateCurrency(currentCurrency);
+        setValidationError(error);
+    }, [currentCurrency, validateCurrency]);
+    // Currency options for the dropdown - use availableCurrencies directly
+    const currencyOptions = React.useMemo(() => {
+        const currencies = availableCurrencies;
+        return currencies.map(currency => {
+            // Include exchange rate in description along with currency name
+            const rate = exchangeRates[currency.code];
+            let description = currency.name;
+            // Add exchange rate if available (reversed: 1 USD = X INR)
+            if (rate && currency.code !== baseCurrency) {
+                const reversedRate = (1 / rate).toFixed(4);
+                description = `${currency.name} (1 ${currency.code} = ${reversedRate} ${baseCurrency})`;
+            }
+            else if (currency.code === baseCurrency) {
+                description = `${currency.name} (Base Currency)`;
+            }
+            return {
+                value: currency.code,
+                label: `${currency.symbol} ${currency.code}`,
+                description: description
+            };
+        });
+    }, [availableCurrencies, exchangeRates, baseCurrency]); // Update when rates change
+    // Get converted amount for display (simplified to avoid re-renders)
+    const convertedAmount = React.useMemo(() => {
+        if (!amount || currentCurrency === baseCurrency)
+            return amount;
+        // Use a simple calculation to avoid context function dependency
+        const rate = exchangeRates[currentCurrency];
+        return rate ? amount * rate : amount;
+    }, [amount, currentCurrency, baseCurrency, exchangeRates]);
+    const handleCurrencyChange = React.useCallback((newCurrency) => {
+        const currencyCode = newCurrency;
+        // Prevent unnecessary updates if currency hasn't changed
+        if (currencyCode === currentCurrency)
+            return;
+        if (onValueChange) {
+            onValueChange(currencyCode);
+        }
+        else {
+            // Update context if no external handler
+            setCurrency(currencyCode);
+        }
+    }, [onValueChange, setCurrency, currentCurrency]);
+    const getCurrentCurrencyInfo = () => {
+        return getCurrencyInfo(currentCurrency);
+    };
+    const getRateInfo = () => {
+        if (currentCurrency === baseCurrency)
+            return null;
+        const rate = exchangeRates[currentCurrency];
+        return rate ? { rate, provider: 'live' } : null;
+    };
+    const currentCurrencyInfo = getCurrentCurrencyInfo();
+    const rateInfo = getRateInfo();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('space-y-1', className), children: [label && variant !== 'compact' && ((0, jsx_runtime_1.jsxs)(ui_3.Label, { className: "font-medium text-[rgb(var(--fg-default))]", children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--color-error))] ml-1", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1", children: [(0, jsx_runtime_1.jsx)(components_1.Dropdown, { value: currentCurrency, onValueChange: handleCurrencyChange, options: currencyOptions, placeholder: placeholder, searchable: true, clearable: false, disabled: disabled, autoWidth: true, variant: variant, size: size, customFooter: (0, jsx_runtime_1.jsx)("div", { className: "border-t p-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(showConverter || allowManualRates) && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onMouseDown: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            pendingModalRef.current = true;
+                                            setTimeout(() => {
+                                                if (pendingModalRef.current) {
+                                                    pendingModalRef.current = false;
+                                                    setShowConverterModal(true);
+                                                }
+                                            }, 100);
+                                        }, className: "inline-flex items-center h-6 px-2 text-xs rounded-md text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))] transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Calculator, { className: "h-3 w-3 mr-1" }), "Currency Hedging"] })), (0, jsx_runtime_1.jsxs)("button", { type: "button", onMouseDown: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            refreshRates();
+                                        }, disabled: isLoading, className: "inline-flex items-center h-6 px-2 text-xs rounded-md text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))] transition-colors disabled:opacity-50", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { className: (0, utils_1.cn)('h-3 w-3 mr-1', isLoading && 'animate-spin') }), "Refresh"] })] }) }) }), amount > 0 && variant === 'detailed' && ((0, jsx_runtime_1.jsx)("div", { className: "bg-[rgb(var(--bg-subtle))] rounded-lg p-3 border border-[rgb(var(--bd-default))]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-[rgb(var(--fg-muted))]", children: ["Amount in ", baseCurrency, ":"] }), (0, jsx_runtime_1.jsx)("div", { className: "font-medium text-[rgb(var(--fg-default))]", children: formatCurrency(amount, baseCurrency) })] }), currentCurrency !== baseCurrency && ((0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-[rgb(var(--fg-muted))]", children: ["Converted to ", currentCurrency, ":"] }), (0, jsx_runtime_1.jsx)("div", { className: "font-medium text-[rgb(var(--color-primary))]", children: formatCurrency(convertedAmount, currentCurrency) })] }))] }) })), contextError && variant !== 'compact' && ((0, jsx_runtime_1.jsxs)(ui_6.Alert, { className: "py-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsxs)(ui_6.AlertDescription, { className: "text-sm", children: [contextError, ". Using cached or fallback rates."] })] })), (validationError || error) && ((0, jsx_runtime_1.jsx)("div", { className: "text-[rgb(var(--color-error))] text-xs mt-1", children: validationError || error }))] }), showConverterModal && ((0, jsx_runtime_1.jsx)(CurrencyConverterModal, { isOpen: showConverterModal, onClose: () => setShowConverterModal(false), allowManualRates: allowManualRates }))] }));
+}
+function CurrencyConverterModal({ isOpen, onClose, allowManualRates }) {
+    const { baseCurrency, availableCurrencies, convertAmount, formatCurrency, setManualRate, removeManualRate, isManualRate } = (0, CurrencyContext_1.useCurrency)();
+    const [amount, setAmount] = React.useState('1000');
+    const [fromCurrency, setFromCurrency] = React.useState(baseCurrency);
+    const [toCurrency, setToCurrency] = React.useState(baseCurrency === 'INR' ? 'USD' : 'INR');
+    const [manualRateInput, setManualRateInput] = React.useState('');
+    const [useManualRate, setUseManualRate] = React.useState(false);
+    const [result, setResult] = React.useState(null);
+    const currencyOptions = availableCurrencies.map(currency => ({
+        value: currency.code,
+        label: `${currency.flag} ${currency.code} - ${currency.name}`
+    }));
+    const handleConvert = React.useCallback(() => {
+        const numAmount = parseFloat(amount);
+        const numManualRate = useManualRate ? parseFloat(manualRateInput) : undefined;
+        if (isNaN(numAmount) || numAmount <= 0)
+            return;
+        if (useManualRate && (isNaN(numManualRate) || numManualRate <= 0))
+            return;
+        if (useManualRate && numManualRate) {
+            // Set manual rate in context
+            setManualRate(fromCurrency, toCurrency, numManualRate);
+        }
+        else {
+            // Remove manual rate if not using
+            removeManualRate(fromCurrency, toCurrency);
+        }
+        const convertedAmount = useManualRate && numManualRate
+            ? numAmount * numManualRate
+            : convertAmount(numAmount, fromCurrency, toCurrency);
+        const rate = useManualRate && numManualRate
+            ? numManualRate
+            : convertedAmount / numAmount;
+        setResult({
+            amount: numAmount,
+            fromCurrency,
+            toCurrency,
+            convertedAmount,
+            rate,
+            timestamp: new Date(),
+            isManualRate: useManualRate
+        });
+    }, [amount, fromCurrency, toCurrency, manualRateInput, useManualRate, convertAmount, setManualRate, removeManualRate]);
+    React.useEffect(() => {
+        if (amount && fromCurrency && toCurrency) {
+            handleConvert();
+        }
+    }, [handleConvert]);
+    // Check if there's already a manual rate set
+    React.useEffect(() => {
+        const hasManualRate = isManualRate(fromCurrency, toCurrency);
+        setUseManualRate(hasManualRate);
+    }, [fromCurrency, toCurrency, isManualRate]);
+    return ((0, jsx_runtime_1.jsx)(ui_4.Modal, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: (0, jsx_runtime_1.jsxs)(ui_4.ModalContent, { size: "lg", children: [(0, jsx_runtime_1.jsx)(ui_4.ModalHeader, { children: (0, jsx_runtime_1.jsx)(ui_4.ModalTitle, { children: "Currency Converter" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_3.Label, { children: "Amount" }), (0, jsx_runtime_1.jsx)(ui_2.Input, { type: "number", value: amount, onChange: (e) => setAmount(e.target.value), placeholder: "Enter amount", min: "0", step: "0.01" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-4 items-end", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_3.Label, { children: "From Currency" }), (0, jsx_runtime_1.jsx)(components_1.Dropdown, { value: fromCurrency, onValueChange: (value) => setFromCurrency(value), options: currencyOptions, searchable: true })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center pb-2", children: (0, jsx_runtime_1.jsx)(ui_1.Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+                                            const temp = fromCurrency;
+                                            setFromCurrency(toCurrency);
+                                            setToCurrency(temp);
+                                        }, className: "h-8 w-8 p-0 rounded-full", title: "Swap currencies", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m0-4l-4-4" }) }) }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_3.Label, { children: "To Currency" }), (0, jsx_runtime_1.jsx)(components_1.Dropdown, { value: toCurrency, onValueChange: (value) => setToCurrency(value), options: currencyOptions, searchable: true })] })] }), allowManualRates && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: "useManualRate", checked: useManualRate, onChange: (e) => setUseManualRate(e.target.checked), className: "rounded-lg border-[rgb(var(--bd-default))]" }), (0, jsx_runtime_1.jsx)(ui_3.Label, { htmlFor: "useManualRate", className: "text-sm", children: "Use manual exchange rate (for hedged scenarios)" })] }), useManualRate && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_3.Label, { children: "Manual Exchange Rate" }), (0, jsx_runtime_1.jsx)(ui_2.Input, { type: "number", value: manualRateInput, onChange: (e) => setManualRateInput(e.target.value), placeholder: `1 ${fromCurrency} = ? ${toCurrency}`, min: "0", step: "0.0001" })] }))] })), result && ((0, jsx_runtime_1.jsx)("div", { className: "bg-[rgb(var(--color-primary))]/10 rounded-lg p-4 border border-[rgb(var(--color-primary))]/20", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-lg font-semibold text-[rgb(var(--fg-default))]", children: [formatCurrency(result.amount, result.fromCurrency), (0, jsx_runtime_1.jsx)("span", { className: "mx-3 text-[rgb(var(--fg-muted))]", children: "=" }), formatCurrency(result.convertedAmount, result.toCurrency)] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm text-[rgb(var(--fg-muted))]", children: ["Exchange Rate: 1 ", result.fromCurrency, " = ", result.rate.toFixed(6), " ", result.toCurrency, result.isManualRate && ((0, jsx_runtime_1.jsx)(ui_5.Badge, { variant: "outline", className: "ml-2", children: "Manual Rate" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-[rgb(var(--fg-muted))]", children: result.timestamp.toLocaleString() })] }) }))] })] }) }));
+}

package/dist/cjs/components/index.js

@@ -0,0 +1,41 @@
+'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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileAttachment = exports.EditableTableCell = exports.QuantityInputPopup = exports.DateTimePicker = exports.DatePicker = exports.Dropdown = exports.EditableDecimalCell = exports.EditableTextCell = exports.MasterEditableCell = void 0;
+// Main component index - exports all design system components
+__exportStar(require("./ui/index.js"), exports);
+__exportStar(require("./layout/index.js"), exports);
+__exportStar(require("./datagrid/index.js"), exports);
+__exportStar(require("./dashboard/index.js"), exports);
+__exportStar(require("./modals/index.js"), exports);
+// Master components - explicit exports to avoid EditableCell conflict with datagrid
+var editable_cells_1 = require("./master/editable-cells/index.js");
+Object.defineProperty(exports, "MasterEditableCell", { enumerable: true, get: function () { return editable_cells_1.EditableCell; } });
+Object.defineProperty(exports, "EditableTextCell", { enumerable: true, get: function () { return editable_cells_1.EditableTextCell; } });
+Object.defineProperty(exports, "EditableDecimalCell", { enumerable: true, get: function () { return editable_cells_1.EditableDecimalCell; } });
+// Direct exports for commonly used components
+var dropdown_1 = require("./forms/dropdown/index.js");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return dropdown_1.Dropdown; } });
+var date_picker_1 = require("./forms/date-picker/index.js");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return date_picker_1.DatePicker; } });
+Object.defineProperty(exports, "DateTimePicker", { enumerable: true, get: function () { return date_picker_1.DateTimePicker; } });
+var quantity_input_popup_1 = require("./forms/quantity-input-popup.js");
+Object.defineProperty(exports, "QuantityInputPopup", { enumerable: true, get: function () { return quantity_input_popup_1.QuantityInputPopup; } });
+var EditableCell_1 = require("./datagrid/cells/EditableCell.js");
+Object.defineProperty(exports, "EditableTableCell", { enumerable: true, get: function () { return EditableCell_1.EditableTableCell; } });
+var FileAttachment_1 = require("./forms/file-attachment/FileAttachment.js");
+Object.defineProperty(exports, "FileAttachment", { enumerable: true, get: function () { return FileAttachment_1.FileAttachment; } });

package/dist/cjs/components/layout/SidebarContextMenu.js

@@ -0,0 +1,179 @@
+'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.SidebarContextMenu = SidebarContextMenu;
+exports.SidebarGroupContextMenu = SidebarGroupContextMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const SidebarPreferencesContext_1 = require("../../contexts/SidebarPreferencesContext.js");
+const useTranslation_1 = require("../../hooks/useTranslation.js");
+function SidebarContextMenu({ children, modulePath, moduleDisplayName, onOpenNewTab }) {
+    const { t } = (0, useTranslation_1.useTranslation)();
+    const { isFavorite, toggleFavorite, hideItem } = (0, SidebarPreferencesContext_1.useSidebarPreferences)();
+    const [open, setOpen] = React.useState(false);
+    const [position, setPosition] = React.useState({ x: 0, y: 0 });
+    const menuRef = React.useRef(null);
+    const isPinned = isFavorite(modulePath);
+    const handleContextMenu = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setPosition({ x: e.clientX, y: e.clientY });
+        setOpen(true);
+    };
+    // Close menu when clicking outside
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const handleClick = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        const handleEscape = (e) => {
+            if (e.key === 'Escape')
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', handleClick);
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [open]);
+    const handlePinToFavorites = () => {
+        toggleFavorite(modulePath);
+        setOpen(false);
+    };
+    const handleOpenNewTab = () => {
+        if (modulePath && modulePath !== '#') {
+            window.open(modulePath, '_blank');
+        }
+        onOpenNewTab?.();
+        setOpen(false);
+    };
+    const handleHide = () => {
+        hideItem(modulePath);
+        setOpen(false);
+    };
+    const handleHelp = () => {
+        window.open('https://docs.indusanalytics.co.in/help', '_blank');
+        setOpen(false);
+    };
+    const handleFeedback = () => {
+        window.open('https://forms.indusanalytics.co.in/feedback', '_blank');
+        setOpen(false);
+    };
+    const menuItemClass = (0, utils_1.cn)("relative flex cursor-pointer select-none items-center rounded-md px-2 py-2 text-sm outline-none", "text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))]");
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full", onContextMenu: handleContextMenu, children: children }), open && typeof document !== 'undefined' && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "fixed z-[500] min-w-[180px] overflow-hidden rounded-lg border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] p-1 shadow-xl", style: { left: position.x, top: position.y }, children: [(0, jsx_runtime_1.jsxs)("button", { className: menuItemClass, onClick: handlePinToFavorites, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Star, { className: (0, utils_1.cn)("mr-3 h-4 w-4", isPinned ? "fill-yellow-400 text-yellow-400" : "text-[rgb(var(--color-icon))]") }), (0, jsx_runtime_1.jsx)("span", { children: isPinned ? t('Unpin from Favorites') : t('Pin to Favorites') })] }), (0, jsx_runtime_1.jsxs)("button", { className: (0, utils_1.cn)(menuItemClass, modulePath === '#' && "opacity-50 cursor-not-allowed"), onClick: handleOpenNewTab, disabled: modulePath === '#', children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "mr-3 h-4 w-4 text-[rgb(var(--color-icon))]" }), (0, jsx_runtime_1.jsx)("span", { children: t('Open in New Tab') })] }), (0, jsx_runtime_1.jsxs)("button", { className: menuItemClass, onClick: handleHide, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { className: "mr-3 h-4 w-4 text-[rgb(var(--color-icon))]" }), (0, jsx_runtime_1.jsx)("span", { children: t('Hide') })] }), (0, jsx_runtime_1.jsx)("div", { className: "my-1 h-px bg-[rgb(var(--bd-default))]" }), (0, jsx_runtime_1.jsxs)("button", { className: menuItemClass, onClick: handleHelp, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HelpCircle, { className: "mr-3 h-4 w-4 text-[rgb(var(--color-icon))]" }), (0, jsx_runtime_1.jsx)("span", { children: t('Help') })] }), (0, jsx_runtime_1.jsxs)("button", { className: menuItemClass, onClick: handleFeedback, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { className: "mr-3 h-4 w-4 text-[rgb(var(--color-icon))]" }), (0, jsx_runtime_1.jsx)("span", { children: t('Provide Feedback') })] })] }), document.body)] }));
+}
+function SidebarGroupContextMenu({ children, groupName, modulePaths }) {
+    const { t } = (0, useTranslation_1.useTranslation)();
+    const { hideItem, isFavorite, toggleFavorite } = (0, SidebarPreferencesContext_1.useSidebarPreferences)();
+    const [open, setOpen] = React.useState(false);
+    const [position, setPosition] = React.useState({ x: 0, y: 0 });
+    const menuRef = React.useRef(null);
+    const allPinned = modulePaths.filter(p => p && p !== '#').every(path => isFavorite(path));
+    const handleContextMenu = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setPosition({ x: e.clientX, y: e.clientY });
+        setOpen(true);
+    };
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const handleClick = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        const handleEscape = (e) => {
+            if (e.key === 'Escape')
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', handleClick);
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [open]);
+    const handlePinAll = () => {
+        modulePaths.forEach(path => {
+            if (path && path !== '#' && !isFavorite(path)) {
+                toggleFavorite(path);
+            }
+        });
+        setOpen(false);
+    };
+    const handleUnpinAll = () => {
+        modulePaths.forEach(path => {
+            if (path && path !== '#' && isFavorite(path)) {
+                toggleFavorite(path);
+            }
+        });
+        setOpen(false);
+    };
+    const handleOpenAllNewTabs = () => {
+        modulePaths.forEach(path => {
+            if (path && path !== '#') {
+                window.open(path, '_blank');
+            }
+        });
+        setOpen(false);
+    };
+    const handleHideGroup = () => {
+        modulePaths.forEach(path => {
+            if (path && path !== '#') {
+                hideItem(path);
+            }
+        });
+        setOpen(false);
+    };
+    const handleHelp = () => {
+        window.open('https://docs.indusanalytics.co.in/help', '_blank');
+        setOpen(false);
+    };
+    const handleFeedback = () => {
+        window.open('https://forms.indusanalytics.co.in/feedback', '_blank');
+        setOpen(false);
+    };
+    const menuItemClass = (0, utils_1.cn)("relative flex cursor-pointer select-none items-center rounded-md px-2 py-2 text-sm outline-none w-full", "text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))]");
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full", onContextMenu: handleContextMenu, children: children }), open && typeof document !== 'undefined' && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "fixed z-[500] min-w-[180px] overflow-hidden rounded-lg border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] p-1 shadow-xl", style: { left: position.x, top: position.y }, children: [(0, jsx_runtime_1.jsxs)("button", { className: menuItemClass, onClick: allPinned ? handleUnpinAll : handlePinAll, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Star, { className: (0, utils_1.cn)("mr-3 h-4 w-4", allPinned ? "fill-yellow-400 text-yellow-400" : "text-[rgb(var(--color-icon))]") }), (0, jsx_runtime_1.jsx)("span", { children: allPinned ? t('Unpin All from Favorites') : t('Pin All to Favorites') })] }), (0, jsx_runtime_1.jsxs)("button", { className: menuItemClass, onClick: handleOpenAllNewTabs, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "mr-3 h-4 w-4 text-[rgb(var(--color-icon))]" }), (0, jsx_runtime_1.jsx)("span", { children: t('Open All in New Tabs') })] }), (0, jsx_runtime_1.jsxs)("button", { className: menuItemClass, onClick: handleHideGroup, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { className: "mr-3 h-4 w-4 text-[rgb(var(--color-icon))]" }), (0, jsx_runtime_1.jsx)("span", { children: t('Hide Group') })] }), (0, jsx_runtime_1.jsx)("div", { className: "my-1 h-px bg-[rgb(var(--bd-default))]" }), (0, jsx_runtime_1.jsxs)("button", { className: menuItemClass, onClick: handleHelp, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HelpCircle, { className: "mr-3 h-4 w-4 text-[rgb(var(--color-icon))]" }), (0, jsx_runtime_1.jsx)("span", { children: t('Help') })] }), (0, jsx_runtime_1.jsxs)("button", { className: menuItemClass, onClick: handleFeedback, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { className: "mr-3 h-4 w-4 text-[rgb(var(--color-icon))]" }), (0, jsx_runtime_1.jsx)("span", { children: t('Provide Feedback') })] })] }), document.body)] }));
+}

package/dist/cjs/components/layout/app-shell.js

@@ -0,0 +1,81 @@
+'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.AppShell = AppShell;
+exports.Page = Page;
+exports.Grid = Grid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const utils_1 = require("../../lib/utils.js");
+const sidebar_1 = require("./sidebar.js");
+const footer_1 = require("./footer.js");
+function AppShell({ children, sidebar, footer, className }) {
+    const [sidebarCollapsed, setSidebarCollapsed] = React.useState(true);
+    const [mobileSidebarOpen, setMobileSidebarOpen] = React.useState(false);
+    const toggleSidebar = () => {
+        setSidebarCollapsed(!sidebarCollapsed);
+    };
+    const toggleMobileSidebar = () => {
+        setMobileSidebarOpen(!mobileSidebarOpen);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex h-screen bg-bg-app", className), children: [mobileSidebarOpen && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-40 bg-bg-overlay/25 lg:hidden", onClick: () => setMobileSidebarOpen(false) })), sidebar && !sidebarCollapsed && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-[39] bg-black/20 backdrop-blur-[2px] hidden lg:block transition-opacity duration-300", onClick: () => setSidebarCollapsed(true) })), sidebar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "hidden lg:flex lg:flex-shrink-0 relative z-40", children: (0, jsx_runtime_1.jsx)(sidebar_1.DynamicSidebar, { ...sidebar, isCollapsed: sidebarCollapsed, onMenuItemClick: () => setSidebarCollapsed(true), onToggleSidebar: toggleSidebar }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("fixed inset-y-0 left-0 z-40 flex w-70 transform transition-transform duration-300 ease-in-out lg:hidden", mobileSidebarOpen ? "translate-x-0" : "-translate-x-full"), children: (0, jsx_runtime_1.jsx)(sidebar_1.DynamicSidebar, { ...sidebar, isCollapsed: false, onMenuItemClick: () => setMobileSidebarOpen(false), className: "w-full" }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col overflow-hidden", children: [(0, jsx_runtime_1.jsx)("main", { className: "flex-1 overflow-y-auto", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full", children: children }) }), footer && (0, jsx_runtime_1.jsx)(footer_1.Footer, { ...footer })] })] }));
+}
+function Page({ children, title, description, actions, className, maxWidth = 'full', padding = true }) {
+    const maxWidths = {
+        sm: 'max-w-sm',
+        md: 'max-w-md',
+        lg: 'max-w-4xl',
+        xl: 'max-w-6xl',
+        '2xl': 'max-w-7xl',
+        full: 'max-w-none'
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("h-full", padding && "p-6 sm:p-8", className), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto", maxWidths[maxWidth]), children: [(title || description || actions) && ((0, jsx_runtime_1.jsx)("div", { className: "mb-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "sm:flex sm:items-center sm:justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [title && ((0, jsx_runtime_1.jsx)("h1", { className: "text-3xl font-semibold text-fg-default", children: title })), description && ((0, jsx_runtime_1.jsx)("p", { className: "mt-2 text-sm text-fg-muted", children: description }))] }), actions && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 sm:mt-0 sm:ml-16 sm:flex-none", children: actions }))] }) })), (0, jsx_runtime_1.jsx)("div", { children: children })] }) }));
+}
+function Grid({ children, columns = { sm: 1, md: 2, lg: 3, xl: 4 }, gap = 6, className }) {
+    const getGridCols = () => {
+        const classes = [];
+        if (columns.sm)
+            classes.push(`grid-cols-${columns.sm}`);
+        if (columns.md)
+            classes.push(`md:grid-cols-${columns.md}`);
+        if (columns.lg)
+            classes.push(`lg:grid-cols-${columns.lg}`);
+        if (columns.xl)
+            classes.push(`xl:grid-cols-${columns.xl}`);
+        return classes.join(' ');
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("grid", getGridCols(), `gap-${gap}`, className), children: children }));
+}