@appcorp/shadcn 1.0.10

package/components/carousel.js

@@ -0,0 +1,168 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Carousel = Carousel;
+exports.CarouselContent = CarouselContent;
+exports.CarouselItem = CarouselItem;
+exports.CarouselPrevious = CarouselPrevious;
+exports.CarouselNext = CarouselNext;
+var React = __importStar(require("react"));
+var embla_carousel_react_1 = __importDefault(require("embla-carousel-react"));
+var lucide_react_1 = require("lucide-react");
+var utils_1 = require("../lib/utils");
+var button_1 = require("./button");
+var CarouselContext = React.createContext(null);
+function useCarousel() {
+    var context = React.useContext(CarouselContext);
+    if (!context) {
+        throw new Error("useCarousel must be used within a <Carousel />");
+    }
+    return context;
+}
+function Carousel(_a) {
+    var _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, opts = _a.opts, setApi = _a.setApi, plugins = _a.plugins, className = _a.className, children = _a.children, props = __rest(_a, ["orientation", "opts", "setApi", "plugins", "className", "children"]);
+    var _c = (0, embla_carousel_react_1.default)(__assign(__assign({}, opts), { axis: orientation === "horizontal" ? "x" : "y" }), plugins), carouselRef = _c[0], api = _c[1];
+    var _d = React.useState(false), canScrollPrev = _d[0], setCanScrollPrev = _d[1];
+    var _e = React.useState(false), canScrollNext = _e[0], setCanScrollNext = _e[1];
+    var onSelect = React.useCallback(function (api) {
+        if (!api)
+            return;
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+    }, []);
+    var scrollPrev = React.useCallback(function () {
+        api === null || api === void 0 ? void 0 : api.scrollPrev();
+    }, [api]);
+    var scrollNext = React.useCallback(function () {
+        api === null || api === void 0 ? void 0 : api.scrollNext();
+    }, [api]);
+    var handleKeyDown = React.useCallback(function (event) {
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            scrollPrev();
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            scrollNext();
+        }
+    }, [scrollPrev, scrollNext]);
+    React.useEffect(function () {
+        if (!api || !setApi)
+            return;
+        setApi(api);
+    }, [api, setApi]);
+    React.useEffect(function () {
+        if (!api)
+            return;
+        onSelect(api);
+        api.on("reInit", onSelect);
+        api.on("select", onSelect);
+        return function () {
+            api === null || api === void 0 ? void 0 : api.off("select", onSelect);
+        };
+    }, [api, onSelect]);
+    return (React.createElement(CarouselContext.Provider, { value: {
+            carouselRef: carouselRef,
+            api: api,
+            opts: opts,
+            orientation: orientation || ((opts === null || opts === void 0 ? void 0 : opts.axis) === "y" ? "vertical" : "horizontal"),
+            scrollPrev: scrollPrev,
+            scrollNext: scrollNext,
+            canScrollPrev: canScrollPrev,
+            canScrollNext: canScrollNext,
+        } },
+        React.createElement("div", __assign({ onKeyDownCapture: handleKeyDown, className: (0, utils_1.cn)("relative", className), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel" }, props), children)));
+}
+function CarouselContent(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var _b = useCarousel(), carouselRef = _b.carouselRef, orientation = _b.orientation;
+    return (React.createElement("div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-content" },
+        React.createElement("div", __assign({ className: (0, utils_1.cn)("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className) }, props))));
+}
+function CarouselItem(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var orientation = useCarousel().orientation;
+    return (React.createElement("div", __assign({ role: "group", "aria-roledescription": "slide", "data-slot": "carousel-item", className: (0, utils_1.cn)("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className) }, props)));
+}
+function CarouselPrevious(_a) {
+    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? "outline" : _b, _c = _a.size, size = _c === void 0 ? "icon" : _c, props = __rest(_a, ["className", "variant", "size"]);
+    var _d = useCarousel(), orientation = _d.orientation, scrollPrev = _d.scrollPrev, canScrollPrev = _d.canScrollPrev;
+    return (React.createElement(button_1.Button, __assign({}, props, { "data-slot": "carousel-previous", variant: variant, size: size, className: (0, utils_1.cn)("absolute size-8 rounded-full", orientation === "horizontal"
+            ? "top-1/2 -left-12 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: function (e) {
+            e.stopPropagation();
+            scrollPrev();
+        } }),
+        React.createElement(lucide_react_1.ArrowLeft, null),
+        React.createElement("span", { className: "sr-only" }, "Previous slide")));
+}
+function CarouselNext(_a) {
+    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? "outline" : _b, _c = _a.size, size = _c === void 0 ? "icon" : _c, props = __rest(_a, ["className", "variant", "size"]);
+    var _d = useCarousel(), orientation = _d.orientation, scrollNext = _d.scrollNext, canScrollNext = _d.canScrollNext;
+    return (React.createElement(button_1.Button, __assign({}, props, { "data-slot": "carousel-next", variant: variant, size: size, className: (0, utils_1.cn)("absolute size-8 rounded-full", orientation === "horizontal"
+            ? "top-1/2 -right-12 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: function (e) {
+            e.stopPropagation();
+            scrollNext();
+        } }),
+        React.createElement(lucide_react_1.ArrowRight, null),
+        React.createElement("span", { className: "sr-only" }, "Next slide")));
+}

package/components/checkbox.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+interface CheckboxProps extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
+    error?: string;
+    info?: string;
+    label?: string;
+}
+declare function Checkbox({ className, error, info, label, id, ...props }: CheckboxProps): React.JSX.Element;
+export { Checkbox };

package/components/checkbox.js

@@ -0,0 +1,87 @@
+"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.Checkbox = Checkbox;
+var React = __importStar(require("react"));
+var CheckboxPrimitive = __importStar(require("@radix-ui/react-checkbox"));
+var lucide_react_1 = require("lucide-react");
+var utils_1 = require("../lib/utils");
+var label_1 = require("./label");
+function Checkbox(_a) {
+    var className = _a.className, error = _a.error, info = _a.info, label = _a.label, id = _a.id, props = __rest(_a, ["className", "error", "info", "label", "id"]);
+    // Determine if there's an error (for aria-invalid and styling)
+    var hasError = Boolean(error);
+    var checkboxElement = (React.createElement(CheckboxPrimitive.Root, __assign({ id: id, "data-slot": "checkbox", "aria-invalid": hasError, className: (0, utils_1.cn)("peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", 
+        // Error state styling
+        hasError &&
+            "data-[state=checked]:bg-destructive data-[state=unchecked]:bg-destructive/20 border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20", className) }, props),
+        React.createElement(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current transition-none" },
+            React.createElement(lucide_react_1.CheckIcon, { className: "size-3.5" }))));
+    // If label is provided, render the complete checkbox with label structure
+    if (label) {
+        return (React.createElement("div", { className: "w-full space-y-2" },
+            React.createElement("div", { className: "flex items-center space-x-2" },
+                checkboxElement,
+                React.createElement(label_1.Label, { htmlFor: id, className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, label)),
+            (error || info) && (React.createElement("div", null, error ? (React.createElement("p", { className: "text-xs text-destructive" }, error)) : info ? (React.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400" }, info)) : null))));
+    }
+    // If no label, render just the checkbox with messages (backward compatibility)
+    return (React.createElement("div", { className: "w-full" },
+        checkboxElement,
+        (error || info) && (React.createElement("div", null, error ? (React.createElement("p", { className: "text-xs text-destructive" }, error)) : info ? (React.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400" }, info)) : null))));
+}

package/components/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/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("./button");
+var label_1 = require("./label");
+var command_1 = require("./command");
+var popover_1 = require("./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 }));
+}