@appcorp/shadcn 1.1.99 → 2.0.0

package/components/enhanced-combobox.js

@@ -1,72 +1,33 @@
 "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.EnhancedCombobox = EnhancedCombobox;
-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("./ui/button");
-var enhanced_label_1 = require("./enhanced-label");
-var command_1 = require("./ui/command");
-var popover_1 = require("./ui/popover");
-function VirtualizedList(_a) {
-    var options = _a.options, selectedValue = _a.selectedValue, onSelect = _a.onSelect, scrollContainer = _a.scrollContainer, testIdOptionPrefix = _a.testIdOptionPrefix;
-    var _b = (0, react_1.useState)({
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { Check, ChevronsUpDown, ChevronUp, ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { EnhancedLabel } from "./enhanced-label";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, } from "./ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+function VirtualizedList({ options, selectedValue, onSelect, scrollContainer, testIdOptionPrefix, }) {
+    const [visibleRange, setVisibleRange] = 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 () {
+    });
+    const handleScroll = useCallback(() => {
         if (!scrollContainer.current)
             return;
-        var _a = scrollContainer.current, scrollTop = _a.scrollTop, clientHeight = _a.clientHeight;
-        var itemHeight = 32; // Approximate item height
-        var containerHeight = clientHeight;
+        const { scrollTop, clientHeight } = scrollContainer.current;
+        const itemHeight = 32; // Approximate item height
+        const 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 = {
+        const start = Math.max(0, Math.floor(scrollTop / itemHeight));
+        const visibleCount = Math.ceil(containerHeight / itemHeight);
+        const bufferSize = Math.min(10, Math.ceil(visibleCount * 0.5)); // Dynamic buffer
+        const end = Math.min(options.length, start + visibleCount + bufferSize);
+        const newRange = {
             start: Math.max(0, start - bufferSize),
             end: end,
         };
         // Only update if the range actually changed to prevent unnecessary re-renders
-        setVisibleRange(function (prevRange) {
+        setVisibleRange((prevRange) => {
             if (prevRange.start !== newRange.start ||
                 prevRange.end !== newRange.end) {
                 return newRange;
@@ -74,36 +35,36 @@ function VirtualizedList(_a) {
             return prevRange;
         });
     }, [options.length, scrollContainer]);
-    (0, react_1.useEffect)(function () {
-        var container = scrollContainer.current;
+    useEffect(() => {
+        const 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;
+            let parentContainer = container.parentElement;
+            const parentScrollHandler = () => handleScroll();
+            while (parentContainer) {
+                const hasOverflow = getComputedStyle(parentContainer).overflowY;
                 if (hasOverflow === "auto" || hasOverflow === "scroll") {
-                    parentContainer_1.addEventListener("scroll", parentScrollHandler_1, {
+                    parentContainer.addEventListener("scroll", parentScrollHandler, {
                         passive: true,
                     });
                     break;
                 }
-                parentContainer_1 = parentContainer_1.parentElement;
+                parentContainer = parentContainer.parentElement;
             }
-            return function () {
+            return () => {
                 container.removeEventListener("scroll", handleScroll);
-                if (parentContainer_1) {
-                    parentContainer_1.removeEventListener("scroll", parentScrollHandler_1);
+                if (parentContainer) {
+                    parentContainer.removeEventListener("scroll", parentScrollHandler);
                 }
             };
         }
     }, [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 () {
+    useEffect(() => {
+        const newEnd = Math.min(options.length, 25);
+        setVisibleRange(() => {
             // Force update if options changed
             return {
                 start: 0,
@@ -116,29 +77,28 @@ function VirtualizedList(_a) {
         }
     }, [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); }, "data-testid": "".concat(testIdOptionPrefix !== null && testIdOptionPrefix !== void 0 ? testIdOptionPrefix : "combobox-option", "-").concat(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 } })));
+    const safeStart = Math.max(0, Math.min(visibleRange.start, options.length - 1));
+    const safeEnd = Math.max(safeStart + 1, Math.min(visibleRange.end, options.length));
+    const visibleOptions = options.slice(safeStart, safeEnd);
+    const topSpacer = safeStart * 32; // Approximate item height
+    const bottomSpacer = Math.max(0, (options.length - safeEnd) * 32);
+    return (React.createElement(React.Fragment, null,
+        topSpacer > 0 && React.createElement("div", { style: { height: topSpacer } }),
+        visibleOptions.map((option, index) => (React.createElement(CommandItem, { key: `${option.value}-${safeStart + index}`, value: option.label, onSelect: () => onSelect(option.value), "data-testid": `${testIdOptionPrefix !== null && testIdOptionPrefix !== void 0 ? testIdOptionPrefix : "combobox-option"}-${option.value}`, className: "cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors h-8 flex items-center" },
+            React.createElement(Check, { className: cn("mr-2 h-4 w-4", selectedValue === option.value ? "opacity-100" : "opacity-0") }),
+            React.createElement("span", { className: "truncate" }, option.label)))),
+        bottomSpacer > 0 && React.createElement("div", { style: { height: bottomSpacer } })));
 }
-function EnhancedCombobox(_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, testIdTrigger = _a.testIdTrigger, testIdSearchInput = _a.testIdSearchInput, testIdPopoverContent = _a.testIdPopoverContent, testIdEmpty = _a.testIdEmpty, testIdList = _a.testIdList, testIdOptionPrefix = _a.testIdOptionPrefix, testIdScrollUp = _a.testIdScrollUp, testIdScrollDown = _a.testIdScrollDown;
-    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;
+export function EnhancedCombobox({ className, disabled = false, emptyText = "No options found.", error, id, info, label, loading = false, maxHeight = 256, onSearchChange, onValueChange, options = [], placeholder = "Select option...", required = false, searchPlaceholder = "Search...", showScrollIndicators = true, value, virtualizeThreshold = 50, testIdTrigger, testIdSearchInput, testIdPopoverContent, testIdEmpty, testIdList, testIdOptionPrefix, testIdScrollUp, testIdScrollDown, }) {
+    const [open, setOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState("");
+    const [canScrollUp, setCanScrollUp] = useState(false);
+    const [canScrollDown, setCanScrollDown] = useState(false);
+    const scrollContainerRef = useRef(null);
+    const selectedOption = options.find((option) => option.value === value);
+    const shouldVirtualize = options.length > virtualizeThreshold;
     // Filter options based on search - always handle filtering at this level for virtualization
-    var filteredOptions = react_1.default.useMemo(function () {
+    const filteredOptions = React.useMemo(() => {
         if (!searchValue) {
             // No search query, return all options
             return options;
@@ -153,15 +113,13 @@ function EnhancedCombobox(_a) {
             return options;
         }
         // Local filtering for non-external search or as fallback
-        return options.filter(function (option) {
-            return option.label.toLowerCase().includes(searchValue.toLowerCase());
-        });
+        return options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()));
     }, [options, searchValue, onSearchChange, shouldVirtualize]);
-    var handleSearchChange = function (search) {
+    const handleSearchChange = (search) => {
         setSearchValue(search);
         onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(search);
     };
-    var handleSelect = function (selectedValue) {
+    const handleSelect = (selectedValue) => {
         if (selectedValue === value) {
             onValueChange("");
         }
@@ -172,74 +130,73 @@ function EnhancedCombobox(_a) {
         setSearchValue("");
     };
     // Handle scroll indicators
-    var updateScrollIndicators = function () {
+    const updateScrollIndicators = () => {
         if (!scrollContainerRef.current)
             return;
-        var _a = scrollContainerRef.current, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
         setCanScrollUp(scrollTop > 0);
         setCanScrollDown(scrollTop < scrollHeight - clientHeight - 1);
     };
     // Update scroll indicators when options change or component opens
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         if (open) {
             // Small delay to ensure DOM is updated
             setTimeout(updateScrollIndicators, 10);
         }
     }, [open, options]);
-    var scrollToTop = function () {
+    const scrollToTop = () => {
         var _a;
         (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: "smooth" });
     };
-    var scrollToBottom = function () {
+    const scrollToBottom = () => {
         if (!scrollContainerRef.current)
             return;
-        var scrollHeight = scrollContainerRef.current.scrollHeight;
+        const { scrollHeight } = scrollContainerRef.current;
         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, "data-testid": testIdTrigger, variant: "outline", role: "combobox", "aria-expanded": open, disabled: disabled, className: (0, utils_1.cn)("w-full justify-between", !selectedOption && "text-muted-foreground", className) },
+    const comboboxElement = (React.createElement(Popover, { open: open, onOpenChange: setOpen, modal: true },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(Button, { id: id, "data-testid": testIdTrigger, variant: "outline", role: "combobox", "aria-expanded": open, disabled: disabled, className: 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, { "data-testid": testIdPopoverContent, 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, { "data-slot": "command-input", "data-testid": testIdSearchInput, placeholder: searchPlaceholder, value: searchValue, onValueChange: handleSearchChange }),
-                react_1.default.createElement(command_1.CommandEmpty, { "data-slot": "command-empty", "data-testid": testIdEmpty }, 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", { "data-testid": testIdScrollUp, 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, { "data-testid": testIdList, 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 &&
+                React.createElement(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" }))),
+        React.createElement(PopoverContent, { "data-testid": testIdPopoverContent, className: "w-[var(--radix-popover-trigger-width)] p-0", side: "bottom", align: "start", avoidCollisions: true, collisionPadding: 8, style: { zIndex: 1000 }, onOpenAutoFocus: (e) => e.preventDefault() },
+            React.createElement(Command, { shouldFilter: false },
+                React.createElement(CommandInput, { "data-slot": "command-input", "data-testid": testIdSearchInput, placeholder: searchPlaceholder, value: searchValue, onValueChange: handleSearchChange }),
+                React.createElement(CommandEmpty, { "data-slot": "command-empty", "data-testid": testIdEmpty }, loading ? (React.createElement("div", { className: "flex items-center justify-center py-6" },
+                    React.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary" }),
+                    React.createElement("span", { className: "ml-2 text-sm" }, "Searching..."))) : (emptyText)),
+                React.createElement("div", { className: "relative" },
+                    showScrollIndicators && canScrollUp && (React.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.createElement("button", { "data-testid": testIdScrollUp, 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.createElement(ChevronUp, { className: "h-3 w-3" })))),
+                    React.createElement(CommandGroup, { "data-testid": testIdList, ref: scrollContainerRef, className: 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: `${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, testIdOptionPrefix: testIdOptionPrefix })) : (
+                    React.createElement(VirtualizedList, { options: filteredOptions, selectedValue: value, onSelect: handleSelect, scrollContainer: scrollContainerRef, testIdOptionPrefix: testIdOptionPrefix })) : (
                     // 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); }, "data-testid": "".concat(testIdOptionPrefix !== null && testIdOptionPrefix !== void 0 ? testIdOptionPrefix : "combobox-option", "-").concat(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", { "data-testid": testIdScrollDown, 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" })))))))));
+                    filteredOptions.map((option) => (React.createElement(CommandItem, { key: option.value, value: option.label, onSelect: () => handleSelect(option.value), "data-testid": `${testIdOptionPrefix !== null && testIdOptionPrefix !== void 0 ? testIdOptionPrefix : "combobox-option"}-${option.value}`, className: "cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors" },
+                        React.createElement(Check, { className: cn("mr-2 h-4 w-4", value === option.value ? "opacity-100" : "opacity-0") }),
+                        React.createElement("span", { className: "truncate" }, option.label)))))),
+                    showScrollIndicators && canScrollDown && (React.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.createElement("button", { "data-testid": testIdScrollDown, 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.createElement(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(enhanced_label_1.EnhancedLabel, { htmlFor: id, required: required }, label),
+        return (React.createElement("div", { className: "w-full space-y-2" },
+            React.createElement(EnhancedLabel, { 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))));
+            error && (React.createElement("p", { className: "text-xs text-destructive dark:text-red-400" }, error)),
+            info && !error && (React.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) {
+export function CompanyCombobox({ companies = [], value, onValueChange, onSearchChange, loading = false, placeholder = "Select company...", className, maxHeight = 320, showScrollIndicators = true, label, required = false, id, info, error, }) {
+    const options = companies.map((company) => {
         var _a, _b;
         return ({
             value: ((_a = company.id) === null || _a === void 0 ? void 0 : _a.toString()) || "",
@@ -247,12 +204,11 @@ function CompanyCombobox(_a) {
             id: (_b = company.id) === null || _b === void 0 ? void 0 : _b.toString(),
         });
     });
-    return (react_1.default.createElement(EnhancedCombobox, { 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 }));
+    return (React.createElement(EnhancedCombobox, { 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;
+export function CountryCombobox({ countries = [], value, onValueChange, onSearchChange, loading = false, placeholder = "Select country...", className, maxHeight = 280, showScrollIndicators = true, label, required = false, id, info, error, }) {
     // Default countries if none provided or if provided list is empty
-    var defaultCountries = [
+    const defaultCountries = [
         { name: "Afghanistan", code: "AF" },
         { name: "Albania", code: "AL" },
         { name: "Algeria", code: "DZ" },
@@ -306,10 +262,10 @@ function CountryCombobox(_a) {
         { name: "United States", code: "US" },
         { name: "Vietnam", code: "VN" },
     ];
-    var countryList = countries.length > 0 ? countries : defaultCountries;
-    var options = countryList.map(function (country) { return ({
+    const countryList = countries.length > 0 ? countries : defaultCountries;
+    const options = countryList.map((country) => ({
         value: country.name,
         label: country.name,
-    }); });
-    return (react_1.default.createElement(EnhancedCombobox, { 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 }));
+    }));
+    return (React.createElement(EnhancedCombobox, { 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/enhanced-drawer-footer.js

@@ -1,39 +1,30 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EnhancedDrawerFooter = exports.DRAWER_FOOTER_COMPONENT_TYPE = void 0;
-var button_1 = require("./ui/button");
-var react_1 = __importDefault(require("react"));
-var DRAWER_FOOTER_COMPONENT_TYPE;
+import { Button } from "./ui/button";
+import React from "react";
+export var DRAWER_FOOTER_COMPONENT_TYPE;
 (function (DRAWER_FOOTER_COMPONENT_TYPE) {
     DRAWER_FOOTER_COMPONENT_TYPE["MORE_ACTIONS_DRAWER"] = "MORE_ACTIONS_DRAWER";
     DRAWER_FOOTER_COMPONENT_TYPE["FILTER_DRAWER"] = "FILTER_DRAWER";
     DRAWER_FOOTER_COMPONENT_TYPE["FORM_DRAWER"] = "FORM_DRAWER";
     DRAWER_FOOTER_COMPONENT_TYPE["VIEW_DRAWER"] = "VIEW_DRAWER";
-})(DRAWER_FOOTER_COMPONENT_TYPE || (exports.DRAWER_FOOTER_COMPONENT_TYPE = DRAWER_FOOTER_COMPONENT_TYPE = {}));
-var EnhancedDrawerFooter = function (_a) {
-    var _b;
-    var applyFilters = _a.applyFilters, clearFilters = _a.clearFilters, closeDrawer = _a.closeDrawer, disableSaveButton = _a.disableSaveButton, drawerType = _a.drawerType, errors = _a.errors, handleSubmit = _a.handleSubmit, updateLoading = _a.updateLoading;
-    var componentMap = (_b = {},
-        _b[DRAWER_FOOTER_COMPONENT_TYPE.MORE_ACTIONS_DRAWER] = (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: "flex gap-2" },
-                react_1.default.createElement(button_1.Button, { className: "flex-1", onClick: clearFilters, variant: "outline" }, "Close")))),
-        _b[DRAWER_FOOTER_COMPONENT_TYPE.FILTER_DRAWER] = (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: "flex gap-2" },
-                react_1.default.createElement(button_1.Button, { className: "flex-1", onClick: clearFilters, variant: "outline" }, "Clear All"),
-                react_1.default.createElement(button_1.Button, { className: "flex-1", onClick: applyFilters }, "Apply Filters")))),
-        _b[DRAWER_FOOTER_COMPONENT_TYPE.FORM_DRAWER] = (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: "flex gap-2" },
-                react_1.default.createElement(button_1.Button, { className: "flex-1", onClick: closeDrawer, variant: "outline" }, "Cancel"),
-                react_1.default.createElement(button_1.Button, { className: "flex-1", onClick: handleSubmit, variant: "default", disabled: updateLoading ||
+})(DRAWER_FOOTER_COMPONENT_TYPE || (DRAWER_FOOTER_COMPONENT_TYPE = {}));
+export const EnhancedDrawerFooter = ({ applyFilters, clearFilters, closeDrawer, disableSaveButton, drawerType, errors, handleSubmit, updateLoading, }) => {
+    const componentMap = {
+        [DRAWER_FOOTER_COMPONENT_TYPE.MORE_ACTIONS_DRAWER]: (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "flex gap-2" },
+                React.createElement(Button, { className: "flex-1", onClick: clearFilters, variant: "outline" }, "Close")))),
+        [DRAWER_FOOTER_COMPONENT_TYPE.FILTER_DRAWER]: (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "flex gap-2" },
+                React.createElement(Button, { className: "flex-1", onClick: clearFilters, variant: "outline" }, "Clear All"),
+                React.createElement(Button, { className: "flex-1", onClick: applyFilters }, "Apply Filters")))),
+        [DRAWER_FOOTER_COMPONENT_TYPE.FORM_DRAWER]: (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "flex gap-2" },
+                React.createElement(Button, { className: "flex-1", onClick: closeDrawer, variant: "outline" }, "Cancel"),
+                React.createElement(Button, { className: "flex-1", onClick: handleSubmit, variant: "default", disabled: updateLoading ||
                         disableSaveButton ||
                         (errors && Object.keys(errors).length > 0) }, "Save")))),
-        _b[DRAWER_FOOTER_COMPONENT_TYPE.VIEW_DRAWER] = (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: "flex gap-2" },
-                react_1.default.createElement(button_1.Button, { className: "flex-1", onClick: closeDrawer }, "Close")))),
-        _b);
-    return react_1.default.createElement(react_1.default.Fragment, null, componentMap[drawerType]);
+        [DRAWER_FOOTER_COMPONENT_TYPE.VIEW_DRAWER]: (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "flex gap-2" },
+                React.createElement(Button, { className: "flex-1", onClick: closeDrawer }, "Close")))),
+    };
+    return React.createElement(React.Fragment, null, componentMap[drawerType]);
 };
-exports.EnhancedDrawerFooter = EnhancedDrawerFooter;

package/components/enhanced-drawer-header.js

@@ -1,15 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { DrawerDescription, DrawerTitle } from "./ui/drawer";
+import React from "react";
+export const EnhancedDrawerHeader = ({ title, description, }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DrawerTitle, null, title),
+        React.createElement(DrawerDescription, null, description)));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EnhancedDrawerHeader = void 0;
-var drawer_1 = require("./ui/drawer");
-var react_1 = __importDefault(require("react"));
-var EnhancedDrawerHeader = function (_a) {
-    var title = _a.title, description = _a.description;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(drawer_1.DrawerTitle, null, title),
-        react_1.default.createElement(drawer_1.DrawerDescription, null, description)));
-};
-exports.EnhancedDrawerHeader = EnhancedDrawerHeader;

package/components/enhanced-dropzone-impl.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { DropzoneOptions } from "react-dropzone";
+export type EnhancedDropzoneProps = {
+    id?: string;
+    className?: string;
+    label?: string;
+    info?: string;
+    error?: string;
+    accept?: DropzoneOptions["accept"] | string[];
+    maxFiles?: number;
+    maxSize?: number;
+    minSize?: number;
+    disabled?: boolean;
+    value?: string[];
+    onChange?: (files: File[]) => void;
+    onRemoveRemote?: (url: string) => void;
+    resize?: boolean;
+    testIdDropzone?: string;
+    testIdInput?: string;
+    testIdPrev?: string;
+    testIdNext?: string;
+    testIdPreviewPrefix?: string;
+    testIdImagePrefix?: string;
+    testIdRemovePrefix?: string;
+    testIdCount?: string;
+    testIdEmptyIcon?: string;
+    testIdEmptyTitle?: string;
+    testIdEmptySubtitle?: string;
+    testIdEmptyNote?: string;
+    testIdMessage?: string;
+};
+export declare const EnhancedDropzone: React.FC<EnhancedDropzoneProps>;