@appcorp/stellar-solutions-modules 0.1.35 → 0.1.37

package/components/theme-provider.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface CustomThemeProviderProps {
+    children: React.ReactNode;
+    defaultTheme?: string;
+    storageKey?: string;
+    enableSystem?: boolean;
+}
+export declare function ThemeProvider({ children, defaultTheme, storageKey, enableSystem, ...props }: CustomThemeProviderProps): React.JSX.Element;
+export {};

package/components/theme-provider.js

@@ -0,0 +1,122 @@
+"use client";
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = ThemeProvider;
+var react_1 = __importStar(require("react"));
+var next_themes_1 = require("next-themes");
+var themes_1 = require("@/lib/themes");
+// Component that applies theme variables when theme changes
+function ThemeApplier(_a) {
+    var children = _a.children;
+    var _b = (0, next_themes_1.useTheme)(), theme = _b.theme, resolvedTheme = _b.resolvedTheme;
+    (0, react_1.useEffect)(function () {
+        var applyTheme = function (themeName) {
+            var themeConfig = themes_1.themes[themeName];
+            if (!themeConfig) {
+                console.warn("Theme \"".concat(themeName, "\" not found, falling back to light theme"));
+                // Fallback to light theme
+                var lightTheme = themes_1.themes.light;
+                if (lightTheme) {
+                    var root_1 = document.documentElement;
+                    Object.entries(lightTheme.colors).forEach(function (_a) {
+                        var key = _a[0], value = _a[1];
+                        root_1.style.setProperty("--".concat(key), value);
+                    });
+                }
+                return;
+            }
+            var root = document.documentElement;
+            // Apply theme colors as CSS variables
+            Object.entries(themeConfig.colors).forEach(function (_a) {
+                var key = _a[0], value = _a[1];
+                root.style.setProperty("--".concat(key), value);
+            });
+            // Add theme class to root element for CSS selectors
+            root.className = root.className.replace(/theme-\w+/g, "");
+            root.classList.add("theme-".concat(themeName));
+            // Also set data-theme attribute for CSS selectors
+            root.setAttribute("data-theme", themeName);
+        };
+        // Apply theme on mount and when theme changes
+        var activeTheme = resolvedTheme || theme || "light";
+        // Always apply theme, even if it's "system" - fallback to light
+        var themeToApply = activeTheme === "system" ? "light" : activeTheme;
+        applyTheme(themeToApply);
+    }, [theme, resolvedTheme]);
+    // Apply default theme on mount
+    (0, react_1.useEffect)(function () {
+        // Apply light theme as default on first mount
+        var applyDefaultTheme = function () {
+            var lightTheme = themes_1.themes.light;
+            if (lightTheme) {
+                var root_2 = document.documentElement;
+                Object.entries(lightTheme.colors).forEach(function (_a) {
+                    var key = _a[0], value = _a[1];
+                    root_2.style.setProperty("--".concat(key), value);
+                });
+            }
+        };
+        applyDefaultTheme();
+    }, []); // Run only once on mount
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+function ThemeProvider(_a) {
+    var children = _a.children, _b = _a.defaultTheme, defaultTheme = _b === void 0 ? "light" : _b, _c = _a.storageKey, storageKey = _c === void 0 ? "ui-theme" : _c, _d = _a.enableSystem, enableSystem = _d === void 0 ? false : _d, props = __rest(_a, ["children", "defaultTheme", "storageKey", "enableSystem"]);
+    return (react_1.default.createElement(next_themes_1.ThemeProvider, __assign({ attribute: "data-theme", defaultTheme: defaultTheme, storageKey: storageKey, enableSystem: enableSystem, themes: Object.keys(themes_1.themes) }, props),
+        react_1.default.createElement(ThemeApplier, null, children)));
+}

package/components/ui/card.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/components/ui/card.js

@@ -0,0 +1,94 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = Card;
+exports.CardHeader = CardHeader;
+exports.CardFooter = CardFooter;
+exports.CardTitle = CardTitle;
+exports.CardAction = CardAction;
+exports.CardDescription = CardDescription;
+exports.CardContent = CardContent;
+var React = __importStar(require("react"));
+var utils_1 = require("@/lib/utils");
+function Card(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card", className: (0, utils_1.cn)("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className) }, props)));
+}
+function CardHeader(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card-header", className: (0, utils_1.cn)("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className) }, props)));
+}
+function CardTitle(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card-title", className: (0, utils_1.cn)("leading-none font-semibold", className) }, props)));
+}
+function CardDescription(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card-description", className: (0, utils_1.cn)("text-muted-foreground text-sm", className) }, props)));
+}
+function CardAction(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card-action", className: (0, utils_1.cn)("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className) }, props)));
+}
+function CardContent(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card-content", className: (0, utils_1.cn)("px-6", className) }, props)));
+}
+function CardFooter(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card-footer", className: (0, utils_1.cn)("flex items-center px-6 [.border-t]:pt-6", className) }, props)));
+}

package/components/ui/combobox.d.ts

@@ -0,0 +1,70 @@
+import React from "react";
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    id?: string;
+}
+interface ComboboxProps {
+    options: ComboboxOption[];
+    value?: string;
+    onValueChange: (value: string) => void;
+    onSearchChange?: (search: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    className?: string;
+    maxHeight?: number;
+    showScrollIndicators?: boolean;
+    virtualizeThreshold?: number;
+    label?: string;
+    required?: boolean;
+    id?: string;
+    info?: string;
+    error?: string;
+}
+export declare function Combobox({ className, disabled, emptyText, error, id, info, label, loading, maxHeight, onSearchChange, onValueChange, options, placeholder, required, searchPlaceholder, showScrollIndicators, value, virtualizeThreshold, }: ComboboxProps): React.JSX.Element;
+interface CompanyComboboxProps {
+    companies: Array<{
+        id?: string;
+        name: string;
+    }>;
+    value?: string;
+    onValueChange: (value: string) => void;
+    onSearchChange: (search: string) => void;
+    loading?: boolean;
+    placeholder?: string;
+    className?: string;
+    maxHeight?: number;
+    showScrollIndicators?: boolean;
+    label?: string;
+    required?: boolean;
+    id?: string;
+    info?: string;
+    error?: string;
+}
+export declare function CompanyCombobox({ companies, value, onValueChange, onSearchChange, loading, placeholder, className, maxHeight, showScrollIndicators, label, required, id, info, error, }: CompanyComboboxProps): React.JSX.Element;
+interface CountryComboboxProps {
+    countries?: Array<{
+        name: string;
+        code?: string;
+    }> | Array<{
+        name: string;
+    }>;
+    value?: string;
+    onValueChange: (value: string) => void;
+    onSearchChange?: (search: string) => void;
+    loading?: boolean;
+    placeholder?: string;
+    className?: string;
+    maxHeight?: number;
+    showScrollIndicators?: boolean;
+    label?: string;
+    required?: boolean;
+    id?: string;
+    info?: string;
+    error?: string;
+}
+export declare function CountryCombobox({ countries, value, onValueChange, onSearchChange, loading, placeholder, className, maxHeight, showScrollIndicators, label, required, id, info, error, }: CountryComboboxProps): React.JSX.Element;
+export {};

package/components/ui/combobox.js

@@ -0,0 +1,315 @@
+"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.Combobox = Combobox;
+exports.CompanyCombobox = CompanyCombobox;
+exports.CountryCombobox = CountryCombobox;
+var react_1 = __importStar(require("react"));
+var lucide_react_1 = require("lucide-react");
+var utils_1 = require("@/lib/utils");
+var button_1 = require("@/components/ui/button");
+var label_1 = require("@/components/ui/label");
+var command_1 = require("@/components/ui/command");
+var popover_1 = require("@/components/ui/popover");
+function VirtualizedList(_a) {
+    var options = _a.options, selectedValue = _a.selectedValue, onSelect = _a.onSelect, scrollContainer = _a.scrollContainer;
+    var _b = (0, react_1.useState)({
+        start: 0,
+        end: Math.min(options.length, 25), // Increased initial visible items
+    }), visibleRange = _b[0], setVisibleRange = _b[1];
+    var handleScroll = (0, react_1.useCallback)(function () {
+        if (!scrollContainer.current)
+            return;
+        var _a = scrollContainer.current, scrollTop = _a.scrollTop, clientHeight = _a.clientHeight;
+        var itemHeight = 32; // Approximate item height
+        var containerHeight = clientHeight;
+        // Calculate visible range with proper bounds checking
+        var start = Math.max(0, Math.floor(scrollTop / itemHeight));
+        var visibleCount = Math.ceil(containerHeight / itemHeight);
+        var bufferSize = Math.min(10, Math.ceil(visibleCount * 0.5)); // Dynamic buffer
+        var end = Math.min(options.length, start + visibleCount + bufferSize);
+        var newRange = {
+            start: Math.max(0, start - bufferSize),
+            end: end,
+        };
+        // Only update if the range actually changed to prevent unnecessary re-renders
+        setVisibleRange(function (prevRange) {
+            if (prevRange.start !== newRange.start ||
+                prevRange.end !== newRange.end) {
+                return newRange;
+            }
+            return prevRange;
+        });
+    }, [options.length, scrollContainer]);
+    (0, react_1.useEffect)(function () {
+        var container = scrollContainer.current;
+        if (container) {
+            // Add scroll listener with passive option for better performance
+            container.addEventListener("scroll", handleScroll, { passive: true });
+            // Also listen to parent containers that might interfere (like drawer)
+            var parentContainer_1 = container.parentElement;
+            var parentScrollHandler_1 = function () { return handleScroll(); };
+            while (parentContainer_1) {
+                var hasOverflow = getComputedStyle(parentContainer_1).overflowY;
+                if (hasOverflow === "auto" || hasOverflow === "scroll") {
+                    parentContainer_1.addEventListener("scroll", parentScrollHandler_1, {
+                        passive: true,
+                    });
+                    break;
+                }
+                parentContainer_1 = parentContainer_1.parentElement;
+            }
+            return function () {
+                container.removeEventListener("scroll", handleScroll);
+                if (parentContainer_1) {
+                    parentContainer_1.removeEventListener("scroll", parentScrollHandler_1);
+                }
+            };
+        }
+    }, [handleScroll, scrollContainer]);
+    // Reset visible range when options change (e.g., due to search filtering)
+    (0, react_1.useEffect)(function () {
+        var newEnd = Math.min(options.length, 25);
+        setVisibleRange(function () {
+            // Force update if options changed
+            return {
+                start: 0,
+                end: newEnd,
+            };
+        });
+        // Reset scroll position when options change
+        if (scrollContainer.current) {
+            scrollContainer.current.scrollTop = 0;
+        }
+    }, [options.length, options, scrollContainer]); // Watch both length and options array
+    // Ensure we always have valid visible range
+    var safeStart = Math.max(0, Math.min(visibleRange.start, options.length - 1));
+    var safeEnd = Math.max(safeStart + 1, Math.min(visibleRange.end, options.length));
+    var visibleOptions = options.slice(safeStart, safeEnd);
+    var topSpacer = safeStart * 32; // Approximate item height
+    var bottomSpacer = Math.max(0, (options.length - safeEnd) * 32);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        topSpacer > 0 && react_1.default.createElement("div", { style: { height: topSpacer } }),
+        visibleOptions.map(function (option, index) { return (react_1.default.createElement(command_1.CommandItem, { key: "".concat(option.value, "-").concat(safeStart + index), value: option.label, onSelect: function () { return onSelect(option.value); }, className: "cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors h-8 flex items-center" },
+            react_1.default.createElement(lucide_react_1.Check, { className: (0, utils_1.cn)("mr-2 h-4 w-4", selectedValue === option.value ? "opacity-100" : "opacity-0") }),
+            react_1.default.createElement("span", { className: "truncate" }, option.label))); }),
+        bottomSpacer > 0 && react_1.default.createElement("div", { style: { height: bottomSpacer } })));
+}
+function Combobox(_a) {
+    var className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.emptyText, emptyText = _c === void 0 ? "No options found." : _c, error = _a.error, id = _a.id, info = _a.info, label = _a.label, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.maxHeight, maxHeight = _e === void 0 ? 256 : _e, onSearchChange = _a.onSearchChange, onValueChange = _a.onValueChange, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.placeholder, placeholder = _g === void 0 ? "Select option..." : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchPlaceholder, searchPlaceholder = _j === void 0 ? "Search..." : _j, _k = _a.showScrollIndicators, showScrollIndicators = _k === void 0 ? true : _k, value = _a.value, _l = _a.virtualizeThreshold, virtualizeThreshold = _l === void 0 ? 50 : _l;
+    var _m = (0, react_1.useState)(false), open = _m[0], setOpen = _m[1];
+    var _o = (0, react_1.useState)(""), searchValue = _o[0], setSearchValue = _o[1];
+    var _p = (0, react_1.useState)(false), canScrollUp = _p[0], setCanScrollUp = _p[1];
+    var _q = (0, react_1.useState)(false), canScrollDown = _q[0], setCanScrollDown = _q[1];
+    var scrollContainerRef = (0, react_1.useRef)(null);
+    var selectedOption = options.find(function (option) { return option.value === value; });
+    var shouldVirtualize = options.length > virtualizeThreshold;
+    // Filter options based on search - always handle filtering at this level for virtualization
+    var filteredOptions = react_1.default.useMemo(function () {
+        if (!searchValue) {
+            // No search query, return all options
+            return options;
+        }
+        if (onSearchChange && shouldVirtualize) {
+            // For virtualized lists with external search, let external handler manage it
+            // but still return all current options as they're already filtered externally
+            return options;
+        }
+        if (onSearchChange && !shouldVirtualize) {
+            // Non-virtualized with external search - let external handler manage
+            return options;
+        }
+        // Local filtering for non-external search or as fallback
+        return options.filter(function (option) {
+            return option.label.toLowerCase().includes(searchValue.toLowerCase());
+        });
+    }, [options, searchValue, onSearchChange, shouldVirtualize]);
+    var handleSearchChange = function (search) {
+        setSearchValue(search);
+        onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(search);
+    };
+    var handleSelect = function (selectedValue) {
+        if (selectedValue === value) {
+            onValueChange("");
+        }
+        else {
+            onValueChange(selectedValue);
+        }
+        setOpen(false);
+        setSearchValue("");
+    };
+    // Handle scroll indicators
+    var updateScrollIndicators = function () {
+        if (!scrollContainerRef.current)
+            return;
+        var _a = scrollContainerRef.current, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+        setCanScrollUp(scrollTop > 0);
+        setCanScrollDown(scrollTop < scrollHeight - clientHeight - 1);
+    };
+    // Update scroll indicators when options change or component opens
+    (0, react_1.useEffect)(function () {
+        if (open) {
+            // Small delay to ensure DOM is updated
+            setTimeout(updateScrollIndicators, 10);
+        }
+    }, [open, options]);
+    var scrollToTop = function () {
+        var _a;
+        (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: "smooth" });
+    };
+    var scrollToBottom = function () {
+        if (!scrollContainerRef.current)
+            return;
+        var scrollHeight = scrollContainerRef.current.scrollHeight;
+        scrollContainerRef.current.scrollTo({
+            top: scrollHeight,
+            behavior: "smooth",
+        });
+    };
+    var comboboxElement = (react_1.default.createElement(popover_1.Popover, { open: open, onOpenChange: setOpen, modal: true },
+        react_1.default.createElement(popover_1.PopoverTrigger, { asChild: true },
+            react_1.default.createElement(button_1.Button, { id: id, variant: "outline", role: "combobox", "aria-expanded": open, disabled: disabled, className: (0, utils_1.cn)("w-full justify-between", !selectedOption && "text-muted-foreground", className) },
+                (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || placeholder,
+                react_1.default.createElement(lucide_react_1.ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" }))),
+        react_1.default.createElement(popover_1.PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", side: "bottom", align: "start", avoidCollisions: true, collisionPadding: 8, style: { zIndex: 1000 }, onOpenAutoFocus: function (e) { return e.preventDefault(); } },
+            react_1.default.createElement(command_1.Command, { shouldFilter: false },
+                react_1.default.createElement(command_1.CommandInput, { placeholder: searchPlaceholder, value: searchValue, onValueChange: handleSearchChange }),
+                react_1.default.createElement(command_1.CommandEmpty, null, loading ? (react_1.default.createElement("div", { className: "flex items-center justify-center py-6" },
+                    react_1.default.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary" }),
+                    react_1.default.createElement("span", { className: "ml-2 text-sm" }, "Searching..."))) : (emptyText)),
+                react_1.default.createElement("div", { className: "relative" },
+                    showScrollIndicators && canScrollUp && (react_1.default.createElement("div", { className: "absolute top-0 left-0 right-0 z-10 h-8 bg-gradient-to-b from-background to-transparent pointer-events-none" },
+                        react_1.default.createElement("button", { onClick: scrollToTop, className: "absolute top-1 left-1/2 transform -translate-x-1/2 p-1 rounded-full bg-background shadow-sm border pointer-events-auto hover:bg-muted transition-colors", "aria-label": "Scroll to top" },
+                            react_1.default.createElement(lucide_react_1.ChevronUp, { className: "h-3 w-3" })))),
+                    react_1.default.createElement(command_1.CommandGroup, { ref: scrollContainerRef, className: (0, utils_1.cn)("overflow-y-auto smooth-scroll", "scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent hover:scrollbar-thumb-muted-foreground/40", "scroll-smooth", filteredOptions.length > 10 && "pb-2" // Extra padding for many options
+                        ), style: { maxHeight: "".concat(maxHeight, "px") }, onScroll: updateScrollIndicators }, shouldVirtualize &&
+                        filteredOptions.length > virtualizeThreshold ? (
+                    // Virtualized rendering for large lists
+                    react_1.default.createElement(VirtualizedList, { options: filteredOptions, selectedValue: value, onSelect: handleSelect, scrollContainer: scrollContainerRef })) : (
+                    // Regular rendering for smaller lists or filtered results
+                    filteredOptions.map(function (option) { return (react_1.default.createElement(command_1.CommandItem, { key: option.value, value: option.label, onSelect: function () { return handleSelect(option.value); }, className: "cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors" },
+                        react_1.default.createElement(lucide_react_1.Check, { className: (0, utils_1.cn)("mr-2 h-4 w-4", value === option.value ? "opacity-100" : "opacity-0") }),
+                        react_1.default.createElement("span", { className: "truncate" }, option.label))); }))),
+                    showScrollIndicators && canScrollDown && (react_1.default.createElement("div", { className: "absolute bottom-0 left-0 right-0 z-10 h-8 bg-gradient-to-t from-background to-transparent pointer-events-none" },
+                        react_1.default.createElement("button", { onClick: scrollToBottom, className: "absolute bottom-1 left-1/2 transform -translate-x-1/2 p-1 rounded-full bg-background shadow-sm border pointer-events-auto hover:bg-muted transition-colors", "aria-label": "Scroll to bottom" },
+                            react_1.default.createElement(lucide_react_1.ChevronDown, { className: "h-3 w-3" })))))))));
+    // If label is provided, render the complete combobox with label structure
+    if (label) {
+        return (react_1.default.createElement("div", { className: "w-full space-y-2" },
+            react_1.default.createElement(label_1.Label, { htmlFor: id, required: required }, label),
+            comboboxElement,
+            error && (react_1.default.createElement("p", { className: "text-xs text-destructive dark:text-red-400" }, error)),
+            info && !error && (react_1.default.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400" }, info))));
+    }
+    // If no label, render just the combobox (backward compatibility)
+    return comboboxElement;
+}
+function CompanyCombobox(_a) {
+    var _b = _a.companies, companies = _b === void 0 ? [] : _b, value = _a.value, onValueChange = _a.onValueChange, onSearchChange = _a.onSearchChange, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.placeholder, placeholder = _d === void 0 ? "Select company..." : _d, className = _a.className, _e = _a.maxHeight, maxHeight = _e === void 0 ? 320 : _e, _f = _a.showScrollIndicators, showScrollIndicators = _f === void 0 ? true : _f, label = _a.label, _g = _a.required, required = _g === void 0 ? false : _g, id = _a.id, info = _a.info, error = _a.error;
+    var options = companies.map(function (company) {
+        var _a, _b;
+        return ({
+            value: ((_a = company.id) === null || _a === void 0 ? void 0 : _a.toString()) || "",
+            label: company.name,
+            id: (_b = company.id) === null || _b === void 0 ? void 0 : _b.toString(),
+        });
+    });
+    return (react_1.default.createElement(Combobox, { options: options, value: value, onValueChange: onValueChange, onSearchChange: onSearchChange, placeholder: placeholder, searchPlaceholder: "Search companies...", emptyText: "No companies found.", loading: loading, className: className, maxHeight: maxHeight, showScrollIndicators: showScrollIndicators, virtualizeThreshold: 100, label: label, required: required, id: id, info: info, error: error }));
+}
+function CountryCombobox(_a) {
+    var _b = _a.countries, countries = _b === void 0 ? [] : _b, value = _a.value, onValueChange = _a.onValueChange, onSearchChange = _a.onSearchChange, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.placeholder, placeholder = _d === void 0 ? "Select country..." : _d, className = _a.className, _e = _a.maxHeight, maxHeight = _e === void 0 ? 280 : _e, _f = _a.showScrollIndicators, showScrollIndicators = _f === void 0 ? true : _f, label = _a.label, _g = _a.required, required = _g === void 0 ? false : _g, id = _a.id, info = _a.info, error = _a.error;
+    // Default countries if none provided or if provided list is empty
+    var defaultCountries = [
+        { name: "Afghanistan", code: "AF" },
+        { name: "Albania", code: "AL" },
+        { name: "Algeria", code: "DZ" },
+        { name: "Argentina", code: "AR" },
+        { name: "Australia", code: "AU" },
+        { name: "Austria", code: "AT" },
+        { name: "Bangladesh", code: "BD" },
+        { name: "Belgium", code: "BE" },
+        { name: "Brazil", code: "BR" },
+        { name: "Canada", code: "CA" },
+        { name: "China", code: "CN" },
+        { name: "Denmark", code: "DK" },
+        { name: "Egypt", code: "EG" },
+        { name: "Finland", code: "FI" },
+        { name: "France", code: "FR" },
+        { name: "Germany", code: "DE" },
+        { name: "Greece", code: "GR" },
+        { name: "India", code: "IN" },
+        { name: "Indonesia", code: "ID" },
+        { name: "Iran", code: "IR" },
+        { name: "Iraq", code: "IQ" },
+        { name: "Ireland", code: "IE" },
+        { name: "Israel", code: "IL" },
+        { name: "Italy", code: "IT" },
+        { name: "Japan", code: "JP" },
+        { name: "Jordan", code: "JO" },
+        { name: "Kenya", code: "KE" },
+        { name: "Malaysia", code: "MY" },
+        { name: "Mexico", code: "MX" },
+        { name: "Netherlands", code: "NL" },
+        { name: "New Zealand", code: "NZ" },
+        { name: "Nigeria", code: "NG" },
+        { name: "Norway", code: "NO" },
+        { name: "Pakistan", code: "PK" },
+        { name: "Philippines", code: "PH" },
+        { name: "Poland", code: "PL" },
+        { name: "Portugal", code: "PT" },
+        { name: "Russia", code: "RU" },
+        { name: "Saudi Arabia", code: "SA" },
+        { name: "Singapore", code: "SG" },
+        { name: "South Africa", code: "ZA" },
+        { name: "South Korea", code: "KR" },
+        { name: "Spain", code: "ES" },
+        { name: "Sweden", code: "SE" },
+        { name: "Switzerland", code: "CH" },
+        { name: "Thailand", code: "TH" },
+        { name: "Turkey", code: "TR" },
+        { name: "Ukraine", code: "UA" },
+        { name: "United Arab Emirates", code: "AE" },
+        { name: "United Kingdom", code: "GB" },
+        { name: "United States", code: "US" },
+        { name: "Vietnam", code: "VN" },
+    ];
+    var countryList = countries.length > 0 ? countries : defaultCountries;
+    var options = countryList.map(function (country) { return ({
+        value: country.name,
+        label: country.name,
+    }); });
+    return (react_1.default.createElement(Combobox, { options: options, value: value, onValueChange: onValueChange, onSearchChange: onSearchChange, placeholder: placeholder, searchPlaceholder: "Search countries...", emptyText: "No countries found.", loading: loading, className: className, maxHeight: maxHeight, showScrollIndicators: showScrollIndicators, virtualizeThreshold: 30, label: label, required: required, id: id, info: info, error: error }));
+}

package/components/ui/command.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Dialog } from "@/components/ui/dialog";
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): React.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
+declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };