@appcorp/shadcn 1.1.16 → 1.1.17

package/components/enhanced-checkbox.d.ts

@@ -4,6 +4,7 @@ interface EnhancedCheckboxProps extends React.ComponentPropsWithoutRef<typeof Ch
     error?: string;
     info?: string;
     label?: string;
+    testId?: string;
 }
 declare const EnhancedCheckbox: React.ForwardRefExoticComponent<EnhancedCheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 export { EnhancedCheckbox };

package/components/enhanced-checkbox.js

@@ -62,10 +62,10 @@ var utils_1 = require("../lib/utils");
 var checkbox_1 = require("./ui/checkbox");
 var enhanced_label_1 = require("./enhanced-label");
 var EnhancedCheckbox = React.forwardRef(function (_a, ref) {
-    var className = _a.className, error = _a.error, info = _a.info, label = _a.label, id = _a.id, props = __rest(_a, ["className", "error", "info", "label", "id"]);
+    var className = _a.className, error = _a.error, info = _a.info, label = _a.label, id = _a.id, testId = _a.testId, props = __rest(_a, ["className", "error", "info", "label", "id", "testId"]);
     // Determine if there's an error (for aria-invalid and styling)
     var hasError = Boolean(error);
-    var checkboxElement = (React.createElement(checkbox_1.Checkbox, __assign({ ref: ref, id: id, "data-slot": "checkbox", "aria-invalid": hasError, className: (0, utils_1.cn)(
+    var checkboxElement = (React.createElement(checkbox_1.Checkbox, __assign({ ref: ref, id: id, "data-slot": "checkbox", "data-testid": testId, "aria-invalid": hasError, className: (0, utils_1.cn)(
         // 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)));

package/components/enhanced-combobox.d.ts

@@ -4,27 +4,72 @@ export interface ComboboxOption {
     label: string;
     id?: string;
 }
+/**
+ * Props for the `EnhancedCombobox` component.
+ *
+ * This component is a fully-featured combobox with optional virtualization,
+ * search, and scroll indicators. All `testId*` props are optional and intended
+ * to be used only for testing (e.g. `data-testid` attributes).
+ */
 interface EnhancedComboboxProps {
+    /** Array of options to show in the list. */
     options: ComboboxOption[];
+    /** Currently selected value. */
     value?: string;
+    /** Called when the selected value changes. */
     onValueChange: (value: string) => void;
+    /** Optional handler invoked when the search text changes. */
     onSearchChange?: (search: string) => void;
+    /** Placeholder text shown in the trigger when no option is selected. */
     placeholder?: string;
+    /** Placeholder shown inside the search input within the popover. */
     searchPlaceholder?: string;
+    /** Text to display when no options are available. */
     emptyText?: string;
+    /** Whether the component is in a loading/searching state. */
     loading?: boolean;
+    /** Whether the combobox is disabled. */
     disabled?: boolean;
+    /** Additional classes to apply to the trigger button. */
     className?: string;
+    /** Maximum height of the dropdown list in pixels. */
     maxHeight?: number;
+    /** Show gradient scroll indicators at the top/bottom of the list. */
     showScrollIndicators?: boolean;
+    /** Number of options above which virtualization is enabled. */
     virtualizeThreshold?: number;
+    /** Optional label displayed above the trigger. */
     label?: string;
+    /** Whether the field is required. */
     required?: boolean;
+    /** `id` applied to the trigger button (also used for label `htmlFor`). */
     id?: string;
+    /** Optional informational text displayed below the component. */
     info?: string;
+    /** Optional error text displayed below the component (error state). */
     error?: string;
+    /** `data-testid` for the trigger button (e.g. `my-combobox-trigger`). */
+    testIdTrigger?: string;
+    /** `data-testid` for the search input inside the popover. */
+    testIdSearchInput?: string;
+    /** `data-testid` for the popover content container. */
+    testIdPopoverContent?: string;
+    /** `data-testid` used on the empty state element (no results). */
+    testIdEmpty?: string;
+    /** `data-testid` for the list container (scrollable element). */
+    testIdList?: string;
+    /**
+     * Prefix used for option items. Each option will receive a `data-testid`
+     * equal to `${testIdOptionPrefix}-${option.value}`. Defaults to
+     * `combobox-option` when not provided.
+     */
+    testIdOptionPrefix?: string;
+    /** `data-testid` for the scroll-up button (when scroll indicators enabled). */
+    testIdScrollUp?: string;
+    /** `data-testid` for the scroll-down button (when scroll indicators enabled). */
+    testIdScrollDown?: string;
 }
-export declare function EnhancedCombobox({ className, disabled, emptyText, error, id, info, label, loading, maxHeight, onSearchChange, onValueChange, options, placeholder, required, searchPlaceholder, showScrollIndicators, value, virtualizeThreshold, }: EnhancedComboboxProps): React.JSX.Element;
+export declare function EnhancedCombobox({ className, disabled, emptyText, error, id, info, label, loading, maxHeight, onSearchChange, onValueChange, options, placeholder, required, searchPlaceholder, showScrollIndicators, value, virtualizeThreshold, testIdTrigger, testIdSearchInput, testIdPopoverContent, testIdEmpty, testIdList, testIdOptionPrefix, testIdScrollUp, testIdScrollDown, }: EnhancedComboboxProps): React.JSX.Element;
 interface CompanyComboboxProps {
     companies: Array<{
         id?: string;

package/components/enhanced-combobox.js

@@ -45,7 +45,7 @@ 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;
+    var options = _a.options, selectedValue = _a.selectedValue, onSelect = _a.onSelect, scrollContainer = _a.scrollContainer, testIdOptionPrefix = _a.testIdOptionPrefix;
     var _b = (0, react_1.useState)({
         start: 0,
         end: Math.min(options.length, 25), // Increased initial visible items
@@ -123,13 +123,13 @@ function VirtualizedList(_a) {
     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" },
+        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 } })));
 }
 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;
+    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];
@@ -201,30 +201,30 @@ function EnhancedCombobox(_a) {
     };
     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) },
+            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) },
                 (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(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", placeholder: searchPlaceholder, value: searchValue, onValueChange: handleSearchChange }),
-                react_1.default.createElement(command_1.CommandEmpty, { "data-slot": "command-empty" }, loading ? (react_1.default.createElement("div", { className: "flex items-center justify-center py-6" },
+                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", { 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("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, { 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
+                    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 &&
                         filteredOptions.length > virtualizeThreshold ? (
                     // Virtualized rendering for large lists
-                    react_1.default.createElement(VirtualizedList, { options: filteredOptions, selectedValue: value, onSelect: handleSelect, scrollContainer: scrollContainerRef })) : (
+                    react_1.default.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); }, className: "cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors" },
+                    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", { 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("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" })))))))));
     // If label is provided, render the complete combobox with label structure
     if (label) {

package/components/enhanced-dropzone.d.ts

@@ -1,21 +1,63 @@
 import React from "react";
 import type { DropzoneOptions } from "react-dropzone";
+/**
+ * Props for `EnhancedDropzone` component.
+ */
 export type EnhancedDropzoneProps = {
+    /** HTML id attribute applied to the hidden file input and used for labeling. */
     id?: string;
+    /** Additional className(s) applied to the root container. */
     className?: string;
+    /** Optional label text displayed above the dropzone. */
     label?: string;
+    /** Informational helper text shown below the component (non-error). */
     info?: string;
+    /** Error message text shown below the component; puts component into error state. */
     error?: string;
+    /**
+     * Accepted file types. Matches `react-dropzone` `accept` option or a list of
+     * mime types / extensions (e.g. `['image/*']` or `{ 'image/*': [] }`).
+     */
     accept?: DropzoneOptions["accept"] | string[];
+    /** Maximum number of files allowed to be selected. Defaults to `10`. */
     maxFiles?: number;
+    /** Maximum file size in bytes. */
     maxSize?: number;
+    /** Minimum file size in bytes. */
     minSize?: number;
+    /** Whether the dropzone is disabled (prevents interactions). */
     disabled?: boolean;
-    /** Remote image URLs to display as previews */
+    /** Remote image URLs to display as previews (read-only remote values). */
     value?: string[];
-    /** Called when files are selected or removed */
+    /** Called when the selected files change (local additions/removals). */
     onChange?: (files: File[]) => void;
-    /** Called when a remote URL is removed */
+    /** Called when a remote URL preview is removed by the user. */
     onRemoveRemote?: (url: string) => void;
+    /** `data-testid` for the root dropzone container. */
+    testIdDropzone?: string;
+    /** `data-testid` for the hidden file input element. */
+    testIdInput?: string;
+    /** `data-testid` for the carousel previous button. */
+    testIdPrev?: string;
+    /** `data-testid` for the carousel next button. */
+    testIdNext?: string;
+    /** Prefix used for preview items: `${prefix}-${index}`. */
+    testIdPreviewPrefix?: string;
+    /** Prefix for preview image elements: `${prefix}-${index}`. */
+    testIdImagePrefix?: string;
+    /** Prefix for remove buttons on previews: `${prefix}-${index}`. */
+    testIdRemovePrefix?: string;
+    /** `data-testid` for the preview count text element. */
+    testIdCount?: string;
+    /** `data-testid` for the empty-state icon wrapper. */
+    testIdEmptyIcon?: string;
+    /** `data-testid` for the empty-state title. */
+    testIdEmptyTitle?: string;
+    /** `data-testid` for the empty-state subtitle. */
+    testIdEmptySubtitle?: string;
+    /** `data-testid` for the empty-state note (max files info). */
+    testIdEmptyNote?: string;
+    /** `data-testid` for the error/info message container. */
+    testIdMessage?: string;
 };
 export declare const EnhancedDropzone: React.FC<EnhancedDropzoneProps>;

package/components/enhanced-dropzone.js

@@ -62,7 +62,7 @@ var carousel_1 = require("./ui/carousel");
 var button_1 = require("./ui/button");
 var lucide_react_1 = require("lucide-react");
 var EnhancedDropzone = function (_a) {
-    var id = _a.id, label = _a.label, info = _a.info, error = _a.error, accept = _a.accept, _b = _a.maxFiles, maxFiles = _b === void 0 ? 10 : _b, maxSize = _a.maxSize, minSize = _a.minSize, disabled = _a.disabled, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, onRemoveRemote = _a.onRemoveRemote, className = _a.className;
+    var id = _a.id, label = _a.label, info = _a.info, error = _a.error, accept = _a.accept, _b = _a.maxFiles, maxFiles = _b === void 0 ? 10 : _b, maxSize = _a.maxSize, minSize = _a.minSize, disabled = _a.disabled, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, onRemoveRemote = _a.onRemoveRemote, className = _a.className, testIdDropzone = _a.testIdDropzone, testIdInput = _a.testIdInput, testIdPrev = _a.testIdPrev, testIdNext = _a.testIdNext, testIdPreviewPrefix = _a.testIdPreviewPrefix, testIdImagePrefix = _a.testIdImagePrefix, testIdRemovePrefix = _a.testIdRemovePrefix, testIdCount = _a.testIdCount, testIdEmptyIcon = _a.testIdEmptyIcon, testIdEmptyTitle = _a.testIdEmptyTitle, testIdEmptySubtitle = _a.testIdEmptySubtitle, testIdEmptyNote = _a.testIdEmptyNote, testIdMessage = _a.testIdMessage;
     // Local files selected by user
     var _d = (0, react_1.useState)([]), localFiles = _d[0], setLocalFiles = _d[1];
     // Track object URLs created for local files
@@ -139,18 +139,18 @@ var EnhancedDropzone = function (_a) {
         url: localPreviewsRef.current.get(file) || "",
         index: index,
     }); }), true);
-    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("w-full", className) },
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("w-full", className), "data-testid": testIdDropzone },
         label && (react_1.default.createElement("label", { className: "mb-2 block text-sm font-medium" }, label)),
         react_1.default.createElement("div", __assign({}, getRootProps(), { className: (0, utils_1.cn)("relative w-full rounded-md border border-dashed p-6 text-center min-h-[280px] flex items-center justify-center", isDragActive && "ring-2 ring-ring ring-offset-2", disabled && "opacity-60 pointer-events-none") }),
-            react_1.default.createElement("input", __assign({}, getInputProps(), { id: id })),
+            react_1.default.createElement("input", __assign({}, getInputProps(), { id: id, "data-testid": testIdInput })),
             allPreviews.length > 0 ? (react_1.default.createElement("div", { className: "flex flex-col items-center w-full" },
                 react_1.default.createElement("div", { className: "relative w-full max-w-md" },
                     react_1.default.createElement(carousel_1.Carousel, { className: "w-full" },
-                        react_1.default.createElement(carousel_1.CarouselPrevious, { type: "button", onClick: function (e) { return e.stopPropagation(); }, onPointerDown: function (e) { return e.stopPropagation(); }, onMouseDown: function (e) { return e.stopPropagation(); } }),
-                        react_1.default.createElement(carousel_1.CarouselNext, { type: "button", onClick: function (e) { return e.stopPropagation(); }, onPointerDown: function (e) { return e.stopPropagation(); }, onMouseDown: function (e) { return e.stopPropagation(); } }),
-                        react_1.default.createElement(carousel_1.CarouselContent, { className: "ml-0" }, allPreviews.map(function (preview, idx) { return (react_1.default.createElement(carousel_1.CarouselItem, { key: "".concat(preview.type, "-").concat(preview.url, "-").concat(idx), className: "pl-4" },
+                        react_1.default.createElement(carousel_1.CarouselPrevious, { type: "button", onClick: function (e) { return e.stopPropagation(); }, onPointerDown: function (e) { return e.stopPropagation(); }, onMouseDown: function (e) { return e.stopPropagation(); }, "data-testid": testIdPrev }),
+                        react_1.default.createElement(carousel_1.CarouselNext, { type: "button", onClick: function (e) { return e.stopPropagation(); }, onPointerDown: function (e) { return e.stopPropagation(); }, onMouseDown: function (e) { return e.stopPropagation(); }, "data-testid": testIdNext }),
+                        react_1.default.createElement(carousel_1.CarouselContent, { className: "ml-0" }, allPreviews.map(function (preview, idx) { return (react_1.default.createElement(carousel_1.CarouselItem, { key: "".concat(preview.type, "-").concat(preview.url, "-").concat(idx), className: "pl-4", "data-testid": "".concat(testIdPreviewPrefix !== null && testIdPreviewPrefix !== void 0 ? testIdPreviewPrefix : "dropzone-preview", "-").concat(idx) },
                             react_1.default.createElement("div", { className: "relative aspect-square w-full max-w-xs mx-auto" }, preview.url ? (react_1.default.createElement(react_1.default.Fragment, null,
-                                react_1.default.createElement("img", { src: preview.url, alt: "Preview ".concat(idx + 1), className: "h-full w-full rounded-lg object-cover", onClick: function (e) { return e.stopPropagation(); } }),
+                                react_1.default.createElement("img", { src: preview.url, alt: "Preview ".concat(idx + 1), className: "h-full w-full rounded-lg object-cover", onClick: function (e) { return e.stopPropagation(); }, "data-testid": "".concat(testIdImagePrefix !== null && testIdImagePrefix !== void 0 ? testIdImagePrefix : "dropzone-image", "-").concat(idx) }),
                                 react_1.default.createElement(button_1.Button, { type: "button", size: "icon", variant: "destructive", onClick: function (e) {
                                         e.stopPropagation();
                                         if (preview.type === "remote") {
@@ -159,29 +159,29 @@ var EnhancedDropzone = function (_a) {
                                         else {
                                             handleRemoveLocal(preview.index);
                                         }
-                                    }, className: "absolute right-2 top-2 h-8 w-8 rounded-full", "aria-label": "Remove image" },
+                                    }, className: "absolute right-2 top-2 h-8 w-8 rounded-full", "aria-label": "Remove image", "data-testid": "".concat(testIdRemovePrefix !== null && testIdRemovePrefix !== void 0 ? testIdRemovePrefix : "dropzone-remove", "-").concat(idx) },
                                     react_1.default.createElement(lucide_react_1.XIcon, { className: "h-4 w-4" })))) : (react_1.default.createElement("div", { className: "flex h-full w-full items-center justify-center rounded-lg bg-muted text-muted-foreground" },
                                 react_1.default.createElement("span", { className: "text-sm" }, "Loading...")))))); })))),
-                react_1.default.createElement("p", { className: "mt-4 text-sm font-medium text-muted-foreground" },
+                react_1.default.createElement("p", { className: "mt-4 text-sm font-medium text-muted-foreground", "data-testid": testIdCount },
                     allPreviews.length,
                     " image",
                     allPreviews.length !== 1 ? "s" : "",
                     " ",
                     "selected"))) : (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center gap-2" },
-                react_1.default.createElement("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg bg-muted text-muted-foreground" },
+                react_1.default.createElement("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg bg-muted text-muted-foreground", "data-testid": testIdEmptyIcon },
                     react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-image" },
                         react_1.default.createElement("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
                         react_1.default.createElement("circle", { cx: "9", cy: "9", r: "2" }),
                         react_1.default.createElement("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }))),
                 react_1.default.createElement("div", { className: "space-y-1 text-center" },
-                    react_1.default.createElement("p", { className: "font-medium text-sm" },
+                    react_1.default.createElement("p", { className: "font-medium text-sm", "data-testid": testIdEmptyTitle },
                         "Upload ",
                         maxFiles === 1 ? "an image" : "images"),
-                    react_1.default.createElement("p", { className: "text-muted-foreground text-xs" }, "Drag and drop or click to browse"),
-                    maxFiles > 1 && (react_1.default.createElement("p", { className: "text-muted-foreground text-xs" },
+                    react_1.default.createElement("p", { className: "text-muted-foreground text-xs", "data-testid": testIdEmptySubtitle }, "Drag and drop or click to browse"),
+                    maxFiles > 1 && (react_1.default.createElement("p", { className: "text-muted-foreground text-xs", "data-testid": testIdEmptyNote },
                         "Up to ",
                         maxFiles,
                         " files")))))),
-        (error || info) && (react_1.default.createElement("div", { className: "mt-2" }, error ? (react_1.default.createElement("p", { className: "text-xs text-destructive" }, error)) : info ? (react_1.default.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400" }, info)) : null))));
+        (error || info) && (react_1.default.createElement("div", { className: "mt-2", "data-testid": testIdMessage }, error ? (react_1.default.createElement("p", { className: "text-xs text-destructive" }, error)) : info ? (react_1.default.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400" }, info)) : null))));
 };
 exports.EnhancedDropzone = EnhancedDropzone;

package/components/enhanced-input.d.ts

@@ -1,8 +1,24 @@
 import * as React from "react";
+/** Props for `EnhancedInput` component. */
 interface EnhancedInputProps extends React.ComponentProps<"input"> {
+    /** Error message text shown below the input; sets error styling when present. */
     error?: string;
+    /** Informational helper text shown below the input (when no error). */
     info?: string;
+    /** Optional label text displayed above the input. */
     label?: string;
+    /** `data-testid` for the root wrapper (the outermost `div`). */
+    testIdWrapper?: string;
+    /** `data-testid` for the native `input` element. */
+    testIdInput?: string;
+    /** `data-testid` for the label element (passes to `EnhancedLabel`). */
+    testIdLabel?: string;
+    /** `data-testid` for the message container (holds error/info). */
+    testIdMessage?: string;
+    /** `data-testid` for the error text element. */
+    testIdError?: string;
+    /** `data-testid` for the info text element. */
+    testIdInfo?: string;
 }
 declare const EnhancedInput: React.ForwardRefExoticComponent<Omit<EnhancedInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { EnhancedInput };

package/components/enhanced-input.js

@@ -61,10 +61,10 @@ var utils_1 = require("../lib/utils");
 var enhanced_label_1 = require("./enhanced-label");
 var input_1 = require("./ui/input");
 var EnhancedInput = React.forwardRef(function (_a, ref) {
-    var className = _a.className, type = _a.type, error = _a.error, info = _a.info, label = _a.label, required = _a.required, id = _a.id, props = __rest(_a, ["className", "type", "error", "info", "label", "required", "id"]);
+    var className = _a.className, type = _a.type, error = _a.error, info = _a.info, label = _a.label, required = _a.required, id = _a.id, testIdWrapper = _a.testIdWrapper, testIdInput = _a.testIdInput, testIdLabel = _a.testIdLabel, testIdMessage = _a.testIdMessage, testIdError = _a.testIdError, testIdInfo = _a.testIdInfo, props = __rest(_a, ["className", "type", "error", "info", "label", "required", "id", "testIdWrapper", "testIdInput", "testIdLabel", "testIdMessage", "testIdError", "testIdInfo"]);
     // Determine if there's an error (for aria-invalid and styling)
     var hasError = Boolean(error);
-    var inputElement = (React.createElement(input_1.Input, __assign({ type: type, ref: ref, id: id, "aria-invalid": hasError, required: required, className: (0, utils_1.cn)(
+    var inputElement = (React.createElement(input_1.Input, __assign({ type: type, ref: ref, id: id, "aria-invalid": hasError, required: required, "data-testid": testIdInput, className: (0, utils_1.cn)(
         // Error state styling
         hasError &&
             "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20", 
@@ -73,15 +73,15 @@ var EnhancedInput = React.forwardRef(function (_a, ref) {
             "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className) }, props)));
     // If label is provided, render the complete input with label structure
     if (label) {
-        return (React.createElement("div", { className: "w-full space-y-2" },
-            React.createElement(enhanced_label_1.EnhancedLabel, { htmlFor: id, required: required }, label),
+        return (React.createElement("div", { className: "w-full space-y-2", "data-testid": testIdWrapper },
+            React.createElement(enhanced_label_1.EnhancedLabel, { htmlFor: id, required: required, "data-testid": testIdLabel }, label),
             inputElement,
-            (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))));
+            (error || info) && (React.createElement("div", { "data-testid": testIdMessage }, error ? (React.createElement("p", { className: "text-xs text-destructive", "data-testid": testIdError }, error)) : info ? (React.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400", "data-testid": testIdInfo }, info)) : null))));
     }
     // If no label, render just the input with messages (backward compatibility)
-    return (React.createElement("div", { className: "w-full" },
+    return (React.createElement("div", { className: "w-full", "data-testid": testIdWrapper },
         inputElement,
-        (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))));
+        (error || info) && (React.createElement("div", { "data-testid": testIdMessage }, error ? (React.createElement("p", { className: "text-xs text-destructive", "data-testid": testIdError }, error)) : info ? (React.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400", "data-testid": testIdInfo }, info)) : null))));
 });
 exports.EnhancedInput = EnhancedInput;
 EnhancedInput.displayName = "EnhancedInput";

package/components/enhanced-label.d.ts

@@ -1,7 +1,13 @@
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
+/** Props for `EnhancedLabel` component. */
 interface EnhancedLabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+    /** Show a required field indicator (asterisk). */
     required?: boolean;
+    /** `data-testid` for the root label element. */
+    testIdLabel?: string;
+    /** `data-testid` for the required asterisk element when `required` is true. */
+    testIdRequired?: string;
 }
-declare function EnhancedLabel({ className, required, children, ...props }: EnhancedLabelProps): React.JSX.Element;
+declare function EnhancedLabel({ className, required, children, testIdLabel, testIdRequired, ...props }: EnhancedLabelProps): React.JSX.Element;
 export { EnhancedLabel };

package/components/enhanced-label.js

@@ -61,8 +61,8 @@ var React = __importStar(require("react"));
 var utils_1 = require("../lib/utils");
 var label_1 = require("./ui/label");
 function EnhancedLabel(_a) {
-    var className = _a.className, _b = _a.required, required = _b === void 0 ? false : _b, children = _a.children, props = __rest(_a, ["className", "required", "children"]);
-    return (React.createElement(label_1.Label, __assign({ "data-slot": "label", className: (0, utils_1.cn)("flex items-center gap-1 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 min-h-5", className) }, props),
+    var className = _a.className, _b = _a.required, required = _b === void 0 ? false : _b, children = _a.children, testIdLabel = _a.testIdLabel, testIdRequired = _a.testIdRequired, props = __rest(_a, ["className", "required", "children", "testIdLabel", "testIdRequired"]);
+    return (React.createElement(label_1.Label, __assign({ "data-slot": "label", "data-testid": testIdLabel, className: (0, utils_1.cn)("flex items-center gap-1 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 min-h-5", className) }, props),
         children,
-        required && (React.createElement("span", { className: "text-destructive text-sm", "aria-label": "required" }, "*"))));
+        required && (React.createElement("span", { className: "text-destructive text-sm", "aria-label": "required", "data-testid": testIdRequired }, "*"))));
 }

package/components/enhanced-select.d.ts

@@ -1,25 +1,54 @@
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
+/** Props for `EnhancedSelect` wrapper component. */
 interface EnhancedSelectProps {
+    /** Error message text shown below the select; sets error styling when present. */
     error?: string;
+    /** Informational helper text shown below the select (when no error). */
     info?: string;
+    /** Optional label text displayed above the select. */
     label?: string;
+    /** Whether the field is required (adds required indicator to label). */
     required?: boolean;
+    /** HTML id used for labeling and accessibility. */
     id?: string;
+    /** Child nodes, typically `SelectTrigger` and `SelectContent`/items. */
     children?: React.ReactNode;
+    /** Controlled selected value. */
     value?: string;
+    /** Uncontrolled initial value. */
     defaultValue?: string;
+    /** Callback fired when the selected value changes. */
     onValueChange?: (value: string) => void;
+    /** Disable the select input and interactions. */
     disabled?: boolean;
+    /** Name attribute for form submissions. */
     name?: string;
+    /** Text direction for the select: left-to-right or right-to-left. */
     dir?: "ltr" | "rtl";
+    /** Control the open state of the select popup. */
     open?: boolean;
+    /** Uncontrolled initial open state. */
     defaultOpen?: boolean;
+    /** Called when the open state changes. */
     onOpenChange?: (open: boolean) => void;
+    /** `data-testid` for the root wrapper (outermost `div`). */
+    testIdWrapper?: string;
+    /** `data-testid` forwarded to the `EnhancedLabel` component. */
+    testIdLabel?: string;
+    /** `data-testid` for the message container (holds error/info). */
+    testIdMessage?: string;
+    /** `data-testid` for the error text element. */
+    testIdError?: string;
+    /** `data-testid` for the info text element. */
+    testIdInfo?: string;
 }
 interface EnhancedSelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+    /** Error text used to style the trigger when present. */
     error?: string;
+    /** `data-testid` for the trigger (the interactive button). */
+    testIdTrigger?: string;
 }
-declare const EnhancedSelect: ({ error, info, label, required, id, children, ...selectProps }: EnhancedSelectProps) => React.JSX.Element;
+declare const EnhancedSelect: ({ error, info, label, required, id, children, testIdWrapper, testIdLabel, testIdMessage, testIdError, testIdInfo, ...selectProps }: EnhancedSelectProps) => React.JSX.Element;
 declare const EnhancedSelectTrigger: React.ForwardRefExoticComponent<EnhancedSelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export { EnhancedSelect, EnhancedSelectTrigger };

package/components/enhanced-select.js

@@ -62,11 +62,11 @@ var utils_1 = require("../lib/utils");
 var select_1 = require("./ui/select");
 var enhanced_label_1 = require("./enhanced-label");
 var EnhancedSelect = function (_a) {
-    var error = _a.error, info = _a.info, label = _a.label, required = _a.required, id = _a.id, children = _a.children, selectProps = __rest(_a, ["error", "info", "label", "required", "id", "children"]);
-    return (React.createElement("div", { className: "w-full space-y-2" },
-        label && (React.createElement(enhanced_label_1.EnhancedLabel, { htmlFor: id, required: required }, label)),
+    var error = _a.error, info = _a.info, label = _a.label, required = _a.required, id = _a.id, children = _a.children, testIdWrapper = _a.testIdWrapper, testIdLabel = _a.testIdLabel, testIdMessage = _a.testIdMessage, testIdError = _a.testIdError, testIdInfo = _a.testIdInfo, selectProps = __rest(_a, ["error", "info", "label", "required", "id", "children", "testIdWrapper", "testIdLabel", "testIdMessage", "testIdError", "testIdInfo"]);
+    return (React.createElement("div", { className: "w-full space-y-2", "data-testid": testIdWrapper },
+        label && (React.createElement(enhanced_label_1.EnhancedLabel, { htmlFor: id, required: required, testIdLabel: testIdLabel }, label)),
         React.createElement(select_1.Select, __assign({}, selectProps), children),
-        (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))));
+        (error || info) && (React.createElement("div", { "data-testid": testIdMessage }, error ? (React.createElement("p", { className: "text-xs text-destructive", "data-testid": testIdError }, error)) : info ? (React.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400", "data-testid": testIdInfo }, info)) : null))));
 };
 exports.EnhancedSelect = EnhancedSelect;
 var EnhancedSelectTrigger = React.forwardRef(function (_a, ref) {

package/components/enhanced-switch.d.ts

@@ -1,10 +1,31 @@
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
+/** Props for `EnhancedSwitch` component. */
 interface EnhancedSwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+    /** Error message text shown below the switch; sets error styling when present. */
     error?: string;
+    /** Informational helper text shown below the switch (when no error). */
     info?: string;
+    /** Optional label text displayed beside the switch. */
     label?: string;
+    /** Optional description text shown under the label. */
     description?: string;
+    /** `data-testid` for the root wrapper (outermost `div`). */
+    testIdWrapper?: string;
+    /** `data-testid` forwarded to the `EnhancedLabel` component. */
+    testIdLabel?: string;
+    /** `data-testid` for the switch root element. */
+    testIdSwitch?: string;
+    /** `data-testid` for the switch thumb element. */
+    testIdThumb?: string;
+    /** `data-testid` for the description paragraph. */
+    testIdDescription?: string;
+    /** `data-testid` for the message container (holds error/info). */
+    testIdMessage?: string;
+    /** `data-testid` for the error text element. */
+    testIdError?: string;
+    /** `data-testid` for the info text element. */
+    testIdInfo?: string;
 }
 declare const EnhancedSwitch: React.ForwardRefExoticComponent<EnhancedSwitchProps & React.RefAttributes<HTMLButtonElement>>;
 export { EnhancedSwitch };

package/components/enhanced-switch.js

@@ -62,28 +62,28 @@ var SwitchPrimitives = __importStar(require("@radix-ui/react-switch"));
 var utils_1 = require("../lib/utils");
 var enhanced_label_1 = require("./enhanced-label");
 var EnhancedSwitch = React.forwardRef(function (_a, ref) {
-    var className = _a.className, error = _a.error, info = _a.info, label = _a.label, required = _a.required, id = _a.id, description = _a.description, props = __rest(_a, ["className", "error", "info", "label", "required", "id", "description"]);
+    var className = _a.className, error = _a.error, info = _a.info, label = _a.label, required = _a.required, id = _a.id, description = _a.description, testIdWrapper = _a.testIdWrapper, testIdLabel = _a.testIdLabel, testIdSwitch = _a.testIdSwitch, testIdThumb = _a.testIdThumb, testIdDescription = _a.testIdDescription, testIdMessage = _a.testIdMessage, testIdError = _a.testIdError, testIdInfo = _a.testIdInfo, props = __rest(_a, ["className", "error", "info", "label", "required", "id", "description", "testIdWrapper", "testIdLabel", "testIdSwitch", "testIdThumb", "testIdDescription", "testIdMessage", "testIdError", "testIdInfo"]);
     // Determine if there's an error (for aria-invalid and styling)
     var hasError = Boolean(error);
-    var switchElement = (React.createElement(SwitchPrimitives.Root, __assign({ ref: ref, id: id, "data-slot": "switch", "aria-invalid": hasError, required: required, className: (0, utils_1.cn)("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", 
+    var switchElement = (React.createElement(SwitchPrimitives.Root, __assign({ ref: ref, id: id, "data-slot": "switch", "data-testid": testIdSwitch, "aria-invalid": hasError, required: required, className: (0, utils_1.cn)("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", 
         // 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(SwitchPrimitives.Thumb, { "data-slot": "switch-thumb", className: (0, utils_1.cn)("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0") })));
+        React.createElement(SwitchPrimitives.Thumb, { "data-slot": "switch-thumb", "data-testid": testIdThumb, className: (0, utils_1.cn)("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0") })));
     // If label is provided, render the complete switch with label structure
     if (label) {
-        return (React.createElement("div", { className: "w-full space-y-2" },
+        return (React.createElement("div", { className: "w-full space-y-2", "data-testid": testIdWrapper },
             React.createElement("div", { className: "flex items-center justify-between space-x-2" },
                 React.createElement("div", null,
-                    React.createElement(enhanced_label_1.EnhancedLabel, { htmlFor: id, required: required }, label),
-                    description && (React.createElement("p", { className: "text-sm text-gray-400" }, description))),
+                    React.createElement(enhanced_label_1.EnhancedLabel, { htmlFor: id, required: required, testIdLabel: testIdLabel }, label),
+                    description && (React.createElement("p", { className: "text-sm text-gray-400", "data-testid": testIdDescription }, description))),
                 switchElement),
-            (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))));
+            (error || info) && (React.createElement("div", { "data-testid": testIdMessage }, error ? (React.createElement("p", { className: "text-xs text-destructive", "data-testid": testIdError }, error)) : info ? (React.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400", "data-testid": testIdInfo }, info)) : null))));
     }
     // If no label, render just the switch with messages (backward compatibility)
-    return (React.createElement("div", { className: "w-full" },
+    return (React.createElement("div", { className: "w-full", "data-testid": testIdWrapper },
         switchElement,
-        (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))));
+        (error || info) && (React.createElement("div", { "data-testid": testIdMessage }, error ? (React.createElement("p", { className: "text-xs text-destructive", "data-testid": testIdError }, error)) : info ? (React.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400", "data-testid": testIdInfo }, info)) : null))));
 });
 exports.EnhancedSwitch = EnhancedSwitch;
 EnhancedSwitch.displayName = "EnhancedSwitch";

package/components/enhanced-table-footer-action.d.ts

@@ -30,6 +30,16 @@ interface EnhancedTableFooterActionProps {
     previousPageLabel?: string;
     /** Label for next page button */
     nextPageLabel?: string;
+    /** `data-testid` for the root wrapper containing the action buttons. */
+    testIdWrapper?: string;
+    /** `data-testid` for the previous button. */
+    testIdPrevious?: string;
+    /** `data-testid` for the next button. */
+    testIdNext?: string;
+    /** `data-testid` for the previous icon element. */
+    testIdPreviousIcon?: string;
+    /** `data-testid` for the next icon element. */
+    testIdNextIcon?: string;
 }
 export declare const EnhancedTableFooterAction: FC<EnhancedTableFooterActionProps>;
 export {};

package/components/enhanced-table-footer-action.js

@@ -22,17 +22,17 @@ var react_1 = __importDefault(require("react"));
 var lucide_react_1 = require("lucide-react");
 var button_1 = require("./ui/button");
 var EnhancedTableFooterAction = function (_a) {
-    var handleNextOnClick = _a.handleNextOnClick, handlePreviousOnClick = _a.handlePreviousOnClick, isNextDisabled = _a.isNextDisabled, isPreviousDisabled = _a.isPreviousDisabled, _b = _a.isRTL, isRTL = _b === void 0 ? false : _b, loading = _a.loading, _c = _a.nextPageLabel, nextPageLabel = _c === void 0 ? "Next page" : _c, _d = _a.previousPageLabel, previousPageLabel = _d === void 0 ? "Previous page" : _d;
+    var handleNextOnClick = _a.handleNextOnClick, handlePreviousOnClick = _a.handlePreviousOnClick, isNextDisabled = _a.isNextDisabled, isPreviousDisabled = _a.isPreviousDisabled, _b = _a.isRTL, isRTL = _b === void 0 ? false : _b, loading = _a.loading, _c = _a.nextPageLabel, nextPageLabel = _c === void 0 ? "Next page" : _c, _d = _a.previousPageLabel, previousPageLabel = _d === void 0 ? "Previous page" : _d, testIdWrapper = _a.testIdWrapper, testIdPrevious = _a.testIdPrevious, testIdNext = _a.testIdNext, testIdPreviousIcon = _a.testIdPreviousIcon, testIdNextIcon = _a.testIdNextIcon;
     // In RTL, arrows should be swapped:
     // Previous should show → (ChevronRight) as it goes to the right in RTL reading order
     // Next should show ← (ChevronLeft) as it goes to the left in RTL reading order
     var PreviousIcon = isRTL ? lucide_react_1.ChevronRight : lucide_react_1.ChevronLeft;
     var NextIcon = isRTL ? lucide_react_1.ChevronLeft : lucide_react_1.ChevronRight;
-    return (react_1.default.createElement("div", { className: "flex gap-1 ".concat(isRTL ? "flex-row-reverse" : "") },
-        react_1.default.createElement(button_1.Button, { variant: "outline", size: "icon", onClick: handlePreviousOnClick, disabled: isPreviousDisabled || loading, "aria-label": previousPageLabel, title: previousPageLabel, className: "".concat(isRTL ? "rotate-180" : "") },
-            react_1.default.createElement(PreviousIcon, { className: "h-4 w-4" })),
-        react_1.default.createElement(button_1.Button, { variant: "outline", size: "icon", onClick: handleNextOnClick, disabled: isNextDisabled || loading, "aria-label": nextPageLabel, title: nextPageLabel, className: "".concat(isRTL ? "rotate-180" : "") },
-            react_1.default.createElement(NextIcon, { className: "h-4 w-4" }))));
+    return (react_1.default.createElement("div", { className: "flex gap-1 ".concat(isRTL ? "flex-row-reverse" : ""), "data-testid": testIdWrapper },
+        react_1.default.createElement(button_1.Button, { variant: "outline", size: "icon", "data-testid": testIdPrevious, onClick: handlePreviousOnClick, disabled: isPreviousDisabled || loading, "aria-label": previousPageLabel, title: previousPageLabel, className: "".concat(isRTL ? "rotate-180" : "") },
+            react_1.default.createElement(PreviousIcon, { className: "h-4 w-4", "data-testid": testIdPreviousIcon })),
+        react_1.default.createElement(button_1.Button, { variant: "outline", size: "icon", "data-testid": testIdNext, onClick: handleNextOnClick, disabled: isNextDisabled || loading, "aria-label": nextPageLabel, title: nextPageLabel, className: "".concat(isRTL ? "rotate-180" : "") },
+            react_1.default.createElement(NextIcon, { className: "h-4 w-4", "data-testid": testIdNextIcon }))));
 };
 exports.EnhancedTableFooterAction = EnhancedTableFooterAction;
 // ============================================================================

package/components/enhanced-table-footer-page.d.ts

@@ -29,6 +29,20 @@ interface EnhancedTableFooterPageProps {
     loadingLabel?: string;
     /** Optional CSS classes for custom styling */
     className?: string;
+    /** `data-testid` for the root wrapper element. */
+    testIdWrapper?: string;
+    /** `data-testid` for the current page number element. */
+    testIdCurrent?: string;
+    /** `data-testid` for the page label element (the word "Page"). */
+    testIdPageLabel?: string;
+    /** `data-testid` for the "of" label element. */
+    testIdOfLabel?: string;
+    /** `data-testid` for the total pages element. */
+    testIdTotal?: string;
+    /** `data-testid` for the loading wrapper when `loading` is true. */
+    testIdLoadingWrapper?: string;
+    /** `data-testid` for the loading spinner (progressbar). */
+    testIdLoadingSpinner?: string;
 }
 export declare const EnhancedTableFooterPage: FC<EnhancedTableFooterPageProps>;
 export {};

package/components/enhanced-table-footer-page.js

@@ -19,23 +19,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EnhancedTableFooterPage = void 0;
 var react_1 = __importDefault(require("react"));
 var EnhancedTableFooterPage = function (_a) {
-    var currentPage = _a.currentPage, _b = _a.isRTL, isRTL = _b === void 0 ? false : _b, loading = _a.loading, _c = _a.loadingLabel, loadingLabel = _c === void 0 ? "Loading" : _c, _d = _a.ofLabel, ofLabel = _d === void 0 ? "of" : _d, _e = _a.pageLabel, pageLabel = _e === void 0 ? "Page" : _e, totalPages = _a.totalPages, _f = _a.className, className = _f === void 0 ? "" : _f;
-    return (react_1.default.createElement("div", { className: "flex items-center gap-2 ".concat(isRTL ? "rtl" : "ltr", " ").concat(className), dir: isRTL ? "rtl" : "ltr", role: "status", "aria-live": "polite", "aria-label": "".concat(pageLabel, " ").concat(currentPage, " ").concat(ofLabel, " ").concat(totalPages) },
+    var currentPage = _a.currentPage, _b = _a.isRTL, isRTL = _b === void 0 ? false : _b, loading = _a.loading, _c = _a.loadingLabel, loadingLabel = _c === void 0 ? "Loading" : _c, _d = _a.ofLabel, ofLabel = _d === void 0 ? "of" : _d, _e = _a.pageLabel, pageLabel = _e === void 0 ? "Page" : _e, totalPages = _a.totalPages, _f = _a.className, className = _f === void 0 ? "" : _f, testIdWrapper = _a.testIdWrapper, testIdCurrent = _a.testIdCurrent, testIdPageLabel = _a.testIdPageLabel, testIdOfLabel = _a.testIdOfLabel, testIdTotal = _a.testIdTotal, testIdLoadingWrapper = _a.testIdLoadingWrapper, testIdLoadingSpinner = _a.testIdLoadingSpinner;
+    return (react_1.default.createElement("div", { className: "flex items-center gap-2 ".concat(isRTL ? "rtl" : "ltr", " ").concat(className), dir: isRTL ? "rtl" : "ltr", role: "status", "aria-live": "polite", "aria-label": "".concat(pageLabel, " ").concat(currentPage, " ").concat(ofLabel, " ").concat(totalPages), "data-testid": testIdWrapper },
         react_1.default.createElement("span", { className: "text-sm text-muted-foreground" }, isRTL ? (
         // RTL layout: Numbers read right-to-left but maintain logical order
         react_1.default.createElement("span", { className: "inline-flex items-center gap-1" },
-            react_1.default.createElement("span", null, totalPages),
-            react_1.default.createElement("span", null, ofLabel),
-            react_1.default.createElement("span", null, currentPage),
-            react_1.default.createElement("span", null, pageLabel))) : (
+            react_1.default.createElement("span", { "data-testid": testIdTotal }, totalPages),
+            react_1.default.createElement("span", { "data-testid": testIdOfLabel }, ofLabel),
+            react_1.default.createElement("span", { "data-testid": testIdCurrent }, currentPage),
+            react_1.default.createElement("span", { "data-testid": testIdPageLabel }, pageLabel))) : (
         // LTR layout: "Page currentPage of totalPages"
         react_1.default.createElement("span", { className: "inline-flex items-center gap-1" },
-            react_1.default.createElement("span", null, pageLabel),
-            react_1.default.createElement("span", null, currentPage),
-            react_1.default.createElement("span", null, ofLabel),
-            react_1.default.createElement("span", null, totalPages)))),
-        loading && (react_1.default.createElement("div", { className: "flex items-center gap-2 ".concat(isRTL ? "order-first" : "order-last"), "aria-label": loadingLabel },
-            react_1.default.createElement("div", { className: "w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin", role: "progressbar", "aria-label": loadingLabel })))));
+            react_1.default.createElement("span", { "data-testid": testIdPageLabel }, pageLabel),
+            react_1.default.createElement("span", { "data-testid": testIdCurrent }, currentPage),
+            react_1.default.createElement("span", { "data-testid": testIdOfLabel }, ofLabel),
+            react_1.default.createElement("span", { "data-testid": testIdTotal }, totalPages)))),
+        loading && (react_1.default.createElement("div", { className: "flex items-center gap-2 ".concat(isRTL ? "order-first" : "order-last"), "aria-label": loadingLabel, "data-testid": testIdLoadingWrapper },
+            react_1.default.createElement("div", { className: "w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin", role: "progressbar", "aria-label": loadingLabel, "data-testid": testIdLoadingSpinner })))));
 };
 exports.EnhancedTableFooterPage = EnhancedTableFooterPage;
 // ============================================================================

package/components/enhanced-table-footer-pagination.d.ts

@@ -33,6 +33,18 @@ interface EnhancedTableFooterPageProps {
     rowsPerPageLabel?: string;
     /** Optional CSS classes for custom styling */
     className?: string;
+    /** `data-testid` for the root pagination wrapper element. */
+    testIdWrapper?: string;
+    /** `data-testid` for the label element. */
+    testIdLabel?: string;
+    /** `data-testid` for the SelectTrigger element. */
+    testIdSelectTrigger?: string;
+    /** `data-testid` for the SelectValue element (shows current value). */
+    testIdSelectValue?: string;
+    /** `data-testid` for the SelectContent container (popup). */
+    testIdSelectContent?: string;
+    /** Prefix used for option test ids: `${prefix}-${option}`. */
+    testIdOptionPrefix?: string;
 }
 export declare const EnhancedTableFooterPagination: FC<EnhancedTableFooterPageProps>;
 export {};

package/components/enhanced-table-footer-pagination.js

@@ -21,15 +21,17 @@ exports.EnhancedTableFooterPagination = void 0;
 var select_1 = require("./ui/select");
 var react_1 = __importDefault(require("react"));
 var EnhancedTableFooterPagination = function (_a) {
-    var handleOnSelect = _a.handleOnSelect, _b = _a.isRTL, isRTL = _b === void 0 ? false : _b, listOptions = _a.listOptions, loading = _a.loading, nodeSelectKey = _a.nodeSelectKey, pageLimit = _a.pageLimit, _c = _a.rowsPerPageLabel, rowsPerPageLabel = _c === void 0 ? "Rows per page:" : _c, _d = _a.className, className = _d === void 0 ? "" : _d;
-    return (react_1.default.createElement("div", { className: "flex items-center gap-2 ".concat(className), dir: isRTL ? "rtl" : "ltr" },
-        react_1.default.createElement("label", { htmlFor: "page-limit-select-".concat(nodeSelectKey), className: "text-sm text-muted-foreground whitespace-nowrap" }, rowsPerPageLabel),
+    var handleOnSelect = _a.handleOnSelect, _b = _a.isRTL, isRTL = _b === void 0 ? false : _b, listOptions = _a.listOptions, loading = _a.loading, nodeSelectKey = _a.nodeSelectKey, pageLimit = _a.pageLimit, _c = _a.rowsPerPageLabel, rowsPerPageLabel = _c === void 0 ? "Rows per page:" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, testIdWrapper = _a.testIdWrapper, testIdLabel = _a.testIdLabel, testIdSelectTrigger = _a.testIdSelectTrigger, testIdSelectValue = _a.testIdSelectValue, testIdSelectContent = _a.testIdSelectContent, testIdOptionPrefix = _a.testIdOptionPrefix;
+    return (react_1.default.createElement("div", { className: "flex items-center gap-2 ".concat(className), dir: isRTL ? "rtl" : "ltr", "data-testid": testIdWrapper },
+        react_1.default.createElement("label", { htmlFor: "page-limit-select-".concat(nodeSelectKey), className: "text-sm text-muted-foreground whitespace-nowrap", "data-testid": testIdLabel }, rowsPerPageLabel),
         react_1.default.createElement(select_1.Select, { value: String(pageLimit), onValueChange: function (value) {
                 return handleOnSelect(nodeSelectKey, { option: value });
             }, disabled: loading },
-            react_1.default.createElement(select_1.SelectTrigger, { id: "page-limit-select-".concat(nodeSelectKey), className: "w-20", "aria-label": "".concat(rowsPerPageLabel, " ").concat(pageLimit) },
-                react_1.default.createElement(select_1.SelectValue, null)),
-            react_1.default.createElement(select_1.SelectContent, null, listOptions.map(function (option) { return (react_1.default.createElement(select_1.SelectItem, { key: option.option, value: option.option, "aria-label": "".concat(option.option, " rows per page") }, option.option)); })))));
+            react_1.default.createElement(select_1.SelectTrigger, { id: "page-limit-select-".concat(nodeSelectKey), className: "w-20", "aria-label": "".concat(rowsPerPageLabel, " ").concat(pageLimit), "data-testid": testIdSelectTrigger },
+                react_1.default.createElement(select_1.SelectValue, { "data-testid": testIdSelectValue })),
+            react_1.default.createElement(select_1.SelectContent, { "data-testid": testIdSelectContent }, listOptions.map(function (option) { return (react_1.default.createElement(select_1.SelectItem, { key: option.option, value: option.option, "aria-label": "".concat(option.option, " rows per page"), "data-testid": testIdOptionPrefix
+                    ? "".concat(testIdOptionPrefix, "-").concat(option.option)
+                    : undefined }, option.option)); })))));
 };
 exports.EnhancedTableFooterPagination = EnhancedTableFooterPagination;
 // ============================================================================

package/components/enhanced-table-header-action.d.ts

@@ -1,9 +1,20 @@
 import { FC } from "react";
 import { HeaderAction } from "./enhanced-table";
 interface EnhancedTableHeaderActionProps {
+    /** Header-level actions to show as buttons in the table header. */
     headerActions: HeaderAction[];
+    /** Number of active filters (used to show a badge on filter buttons). */
     numberOfFilters?: number;
+    /** Callback invoked when the user clears all filters (clear icon). */
     onClearFilters?: () => void;
+    /** `data-testid` for the wrapper containing all header action buttons. */
+    testIdWrapper?: string;
+    /** `data-testid` prefix for individual action buttons: `${prefix}-${index}`. */
+    testIdActionPrefix?: string;
+    /** `data-testid` for the badge that shows number of filters. */
+    testIdFilterBadge?: string;
+    /** `data-testid` for the clear-filters button/icon. */
+    testIdClearFilters?: string;
 }
 export declare const EnhancedTableHeaderAction: FC<EnhancedTableHeaderActionProps>;
 export {};

package/components/enhanced-table-header-action.js

@@ -9,8 +9,8 @@ var lucide_react_1 = require("lucide-react");
 var button_1 = require("./ui/button");
 var badge_1 = require("./ui/badge");
 var EnhancedTableHeaderAction = function (_a) {
-    var headerActions = _a.headerActions, numberOfFilters = _a.numberOfFilters, onClearFilters = _a.onClearFilters;
-    return (react_1.default.createElement(react_1.default.Fragment, null, headerActions.length > 0 && (react_1.default.createElement("div", { className: "flex gap-2" }, headerActions
+    var headerActions = _a.headerActions, numberOfFilters = _a.numberOfFilters, onClearFilters = _a.onClearFilters, testIdWrapper = _a.testIdWrapper, testIdActionPrefix = _a.testIdActionPrefix, testIdFilterBadge = _a.testIdFilterBadge, testIdClearFilters = _a.testIdClearFilters;
+    return (react_1.default.createElement(react_1.default.Fragment, null, headerActions.length > 0 && (react_1.default.createElement("div", { className: "flex gap-2", "data-testid": testIdWrapper }, headerActions
         .filter(function (action) { return action.enabled !== false; })
         .sort(function (a, b) { return (a.order || 0) - (b.order || 0); })
         .map(function (action, index) {
@@ -21,15 +21,17 @@ var EnhancedTableHeaderAction = function (_a) {
             typeof numberOfFilters === "number" &&
             numberOfFilters > 0;
         return (react_1.default.createElement("div", { key: action.id || action.key || index, className: "relative" },
-            react_1.default.createElement(button_1.Button, { variant: action.variant || "default", onClick: function () {
+            react_1.default.createElement(button_1.Button, { variant: action.variant || "default", "data-testid": testIdActionPrefix
+                    ? "".concat(testIdActionPrefix, "-").concat(index)
+                    : undefined, onClick: function () {
                     if (action.onClick)
                         action.onClick();
                     if (action.handleOnClick)
                         action.handleOnClick();
                 } }, action.label),
             showFilterIndicators && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(badge_1.Badge, { variant: "secondary", className: "absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0 text-xs rounded-full" }, numberOfFilters),
-                onClearFilters && (react_1.default.createElement("button", { onClick: function (e) {
+                react_1.default.createElement(badge_1.Badge, { variant: "secondary", className: "absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0 text-xs rounded-full", "data-testid": testIdFilterBadge }, numberOfFilters),
+                onClearFilters && (react_1.default.createElement("button", { "data-testid": testIdClearFilters, onClick: function (e) {
                         e.stopPropagation();
                         onClearFilters();
                     }, className: "absolute -top-2 -left-2 h-5 w-5 rounded-full bg-muted hover:bg-muted/80 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors", "aria-label": "Clear all filters" },

package/components/enhanced-table-header-search.d.ts

@@ -1,12 +1,27 @@
 import { FC } from "react";
 interface EnhancedTableHeaderSearchProps {
+    /** Called when the search input changes. */
     handleSearchInput: (key: string, value: string) => void;
+    /** Whether the search area is currently loading. */
     loading: boolean;
+    /** Disable the search input. */
     searchDisabled?: boolean;
+    /** Enable or disable rendering of the search field. */
     searchEnabled?: boolean;
+    /** `id` applied to the native search input. */
     searchId?: string;
+    /** Placeholder text for the search input. */
     searchPlaceholder?: string;
+    /** Controlled search input value. */
     searchValue: string;
+    /** `data-testid` for the wrapper containing the search input. */
+    testIdWrapper?: string;
+    /** `data-testid` for the native input element. */
+    testIdInput?: string;
+    /** `data-testid` for the search icon element. */
+    testIdIcon?: string;
+    /** `data-testid` for a potential loading indicator. */
+    testIdLoading?: string;
 }
 export declare const EnhancedTableHeaderSearch: FC<EnhancedTableHeaderSearchProps>;
 export {};

package/components/enhanced-table-header-search.js

@@ -8,10 +8,11 @@ var react_1 = __importDefault(require("react"));
 var lucide_react_1 = require("lucide-react");
 var input_1 = require("./ui/input");
 var EnhancedTableHeaderSearch = function (_a) {
-    var handleSearchInput = _a.handleSearchInput, loading = _a.loading, _b = _a.searchDisabled, searchDisabled = _b === void 0 ? false : _b, _c = _a.searchEnabled, searchEnabled = _c === void 0 ? true : _c, _d = _a.searchId, searchId = _d === void 0 ? "table-search" : _d, _e = _a.searchPlaceholder, searchPlaceholder = _e === void 0 ? "Search..." : _e, searchValue = _a.searchValue;
-    return (react_1.default.createElement(react_1.default.Fragment, null, searchEnabled && (react_1.default.createElement("div", { className: "flex items-center gap-2 max-w-xl" },
+    var handleSearchInput = _a.handleSearchInput, loading = _a.loading, _b = _a.searchDisabled, searchDisabled = _b === void 0 ? false : _b, _c = _a.searchEnabled, searchEnabled = _c === void 0 ? true : _c, _d = _a.searchId, searchId = _d === void 0 ? "table-search" : _d, _e = _a.searchPlaceholder, searchPlaceholder = _e === void 0 ? "Search..." : _e, searchValue = _a.searchValue, testIdWrapper = _a.testIdWrapper, testIdInput = _a.testIdInput, testIdIcon = _a.testIdIcon, testIdLoading = _a.testIdLoading;
+    return (react_1.default.createElement(react_1.default.Fragment, null, searchEnabled && (react_1.default.createElement("div", { className: "flex items-center gap-2 max-w-xl", "data-testid": testIdWrapper },
         react_1.default.createElement("div", { className: "relative flex-1" },
-            react_1.default.createElement(lucide_react_1.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
-            react_1.default.createElement(input_1.Input, { id: searchId, placeholder: searchPlaceholder, value: searchValue, onChange: function (e) { return handleSearchInput("search", e.target.value); }, disabled: searchDisabled || loading, className: "pl-9" }))))));
+            react_1.default.createElement(lucide_react_1.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground", "data-testid": testIdIcon }),
+            react_1.default.createElement(input_1.Input, { id: searchId, placeholder: searchPlaceholder, value: searchValue, onChange: function (e) { return handleSearchInput("search", e.target.value); }, disabled: searchDisabled || loading, className: "pl-9", "data-testid": testIdInput }),
+            loading && testIdLoading && (react_1.default.createElement("span", { className: "sr-only", "data-testid": testIdLoading })))))));
 };
 exports.EnhancedTableHeaderSearch = EnhancedTableHeaderSearch;

package/components/enhanced-table.d.ts

@@ -44,47 +44,143 @@ export interface PageLimitOption {
     option: string;
 }
 export interface EnhancedTableProps {
+    /** Columns configuration for the table header. */
     tableHeadItems: TableColumn[];
+    /** Row data to render in the table body. */
     tableBodyRows: TableRow[];
+    /** Column definitions describing how to render each cell. */
     tableBodyCols: Array<{
+        /** Key path(s) used to resolve the value from a row. Supports colon-separated nested paths. */
         key?: string | string[];
+        /** Component type (from `COMPONENT_TYPE`) or a compatible external string. */
         componentType: COMPONENT_TYPE | string;
+        /** Optional custom formatter invoked with `(value, row)` to render the cell. */
         textFormatter?: (value: unknown, row: unknown) => React.ReactNode;
     }>;
+    /** Visible table heading shown above the table. */
     tableHeading: string;
+    /** Optional description text shown beneath the heading. */
     tableDescription?: string;
+    /** Current page number (1-based). */
     currentPage: number;
+    /** Total number of pages available. */
     totalPages: number;
+    /** Items per page (page size). */
     pageLimit: number;
+    /** Options for rows-per-page selector. */
     listOptions: PageLimitOption[];
+    /** Called when the user navigates to the next page. */
     handleNextOnClick: () => void;
+    /** Called when the user navigates to the previous page. */
     handlePreviousOnClick: () => void;
+    /** Handler for select changes in pagination controls. */
     handleOnSelect: (node: string, value: object) => void;
+    /** Whether the "next" control is disabled. */
     isNextDisabled: boolean;
+    /** Whether the "previous" control is disabled. */
     isPreviousDisabled: boolean;
+    /** Enable/disable the search input in the table header. */
     searchEnabled?: boolean;
+    /** Current search input value. */
     searchValue: string;
+    /** Placeholder text for the search input. */
     searchPlaceholder?: string;
+    /** Optional id attribute for the search input element. */
     searchId?: string;
+    /** Disable the search input. */
     searchDisabled?: boolean;
+    /** Called when the search input value changes. */
     handleSearchInput: (key: string, value: string) => void;
+    /** Header-level actions to show in the table header. */
     headerActions: HeaderAction[];
+    /** Row-level actions for each row. */
     rowActions: RowAction[];
+    /** Number of active filters (shown in header actions). */
     numberOfFilters?: number;
+    /** Called to clear applied filters. */
     onClearFilters?: () => void;
+    /** Whether the table is currently loading data. */
     loading: boolean;
+    /** Render layout in right-to-left mode when true. */
     isRTL?: boolean;
+    /** Optional override labels used for UI text in the table. */
     translationLabels?: {
+        /** Label to use for boolean `true`. */
         booleanYes?: string;
+        /** Label to use for boolean `false`. */
         booleanNo?: string;
+        /** Empty-state text when no rows exist. */
         noResultsFound?: string;
+        /** Label for the previous page control. */
         previousPage?: string;
+        /** Label for the next page control. */
         nextPage?: string;
+        /** Label for the word "page" used in pagination. */
         page?: string;
+        /** Label for the word "of" used in pagination. */
         of?: string;
+        /** Label used while loading. */
         loading?: string;
+        /** Label for the rows-per-page control. */
         rowsPerPage?: string;
     };
+    /** Optional key name used by the pagination select control (defaults to "pageLimit"). */
     nodeSelectKey?: string;
+    /** `data-testid` for the root container wrapping the whole component. */
+    testIdWrapper?: string;
+    /** `data-testid` for the table heading (`h2`). */
+    testIdHeading?: string;
+    /** `data-testid` for the optional table description paragraph. */
+    testIdTableDescription?: string;
+    /** `data-testid` for the search wrapper (contains the header search component). */
+    testIdSearch?: string;
+    /** `data-testid` for the header actions wrapper. */
+    testIdHeaderActions?: string;
+    /** `data-testid` for the table wrapper (the bordered `div` that contains the table). */
+    testIdTableWrapper?: string;
+    /** Prefix used for row test ids: `${prefix}-${rowIndex}`. */
+    testIdRowPrefix?: string;
+    /** Prefix used for cell test ids: `${prefix}-${rowIndex}-${colIndex}`. */
+    testIdCellPrefix?: string;
+    /** `data-testid` for the no-results empty state cell. */
+    testIdNoResults?: string;
+    /** Prefix used for loading row test ids: `${prefix}-${index}`. */
+    testIdLoadingRowPrefix?: string;
+    /** `data-testid` for the pagination wrapper area. */
+    testIdPaginationWrapper?: string;
+    /** `data-testid` forwarded to the footer pagination component. */
+    testIdFooterPagination?: string;
+    /** `data-testid` forwarded to the footer page component. */
+    testIdFooterPage?: string;
+    /** `data-testid` forwarded to the footer action component. */
+    testIdFooterAction?: string;
+    /** RTL `data-testid` for the root container. */
+    testIdWrapperRtl?: string;
+    /** RTL `data-testid` for the table heading. */
+    testIdHeadingRtl?: string;
+    /** RTL `data-testid` for the table description. */
+    testIdTableDescriptionRtl?: string;
+    /** RTL `data-testid` for the search wrapper. */
+    testIdSearchRtl?: string;
+    /** RTL `data-testid` for the header actions wrapper. */
+    testIdHeaderActionsRtl?: string;
+    /** RTL `data-testid` for the table wrapper. */
+    testIdTableWrapperRtl?: string;
+    /** Prefix used for row test ids in RTL: `${prefix}-${rowIndex}`. */
+    testIdRowPrefixRtl?: string;
+    /** Prefix used for cell test ids in RTL: `${prefix}-${rowIndex}-${colIndex}`. */
+    testIdCellPrefixRtl?: string;
+    /** RTL `data-testid` for the no-results empty state cell. */
+    testIdNoResultsRtl?: string;
+    /** Prefix used for loading row test ids in RTL: `${prefix}-${index}`. */
+    testIdLoadingRowPrefixRtl?: string;
+    /** RTL `data-testid` for the pagination wrapper area. */
+    testIdPaginationWrapperRtl?: string;
+    /** RTL `data-testid` forwarded to the footer pagination component. */
+    testIdFooterPaginationRtl?: string;
+    /** RTL `data-testid` forwarded to the footer page component. */
+    testIdFooterPageRtl?: string;
+    /** RTL `data-testid` forwarded to the footer action component. */
+    testIdFooterActionRtl?: string;
 }
 export declare const EnhancedTable: React.FC<EnhancedTableProps>;

package/components/enhanced-table.js

@@ -41,7 +41,7 @@ var COMPONENT_TYPE;
     COMPONENT_TYPE["BOOLEAN"] = "BOOLEAN";
 })(COMPONENT_TYPE || (exports.COMPONENT_TYPE = COMPONENT_TYPE = {}));
 var EnhancedTable = function (_a) {
-    var currentPage = _a.currentPage, handleNextOnClick = _a.handleNextOnClick, handleOnSelect = _a.handleOnSelect, handlePreviousOnClick = _a.handlePreviousOnClick, handleSearchInput = _a.handleSearchInput, headerActions = _a.headerActions, isNextDisabled = _a.isNextDisabled, isPreviousDisabled = _a.isPreviousDisabled, _b = _a.isRTL, isRTL = _b === void 0 ? false : _b, listOptions = _a.listOptions, loading = _a.loading, _c = _a.nodeSelectKey, nodeSelectKey = _c === void 0 ? "pageLimit" : _c, numberOfFilters = _a.numberOfFilters, onClearFilters = _a.onClearFilters, pageLimit = _a.pageLimit, rowActions = _a.rowActions, _d = _a.searchDisabled, searchDisabled = _d === void 0 ? false : _d, _e = _a.searchEnabled, searchEnabled = _e === void 0 ? true : _e, _f = _a.searchId, searchId = _f === void 0 ? "table-search" : _f, _g = _a.searchPlaceholder, searchPlaceholder = _g === void 0 ? "Search..." : _g, searchValue = _a.searchValue, tableBodyCols = _a.tableBodyCols, tableBodyRows = _a.tableBodyRows, tableDescription = _a.tableDescription, tableHeading = _a.tableHeading, tableHeadItems = _a.tableHeadItems, totalPages = _a.totalPages, _h = _a.translationLabels, translationLabels = _h === void 0 ? {} : _h;
+    var currentPage = _a.currentPage, handleNextOnClick = _a.handleNextOnClick, handleOnSelect = _a.handleOnSelect, handlePreviousOnClick = _a.handlePreviousOnClick, handleSearchInput = _a.handleSearchInput, headerActions = _a.headerActions, isNextDisabled = _a.isNextDisabled, isPreviousDisabled = _a.isPreviousDisabled, _b = _a.isRTL, isRTL = _b === void 0 ? false : _b, listOptions = _a.listOptions, loading = _a.loading, _c = _a.nodeSelectKey, nodeSelectKey = _c === void 0 ? "pageLimit" : _c, numberOfFilters = _a.numberOfFilters, onClearFilters = _a.onClearFilters, pageLimit = _a.pageLimit, rowActions = _a.rowActions, _d = _a.searchDisabled, searchDisabled = _d === void 0 ? false : _d, _e = _a.searchEnabled, searchEnabled = _e === void 0 ? true : _e, _f = _a.searchId, searchId = _f === void 0 ? "table-search" : _f, _g = _a.searchPlaceholder, searchPlaceholder = _g === void 0 ? "Search..." : _g, searchValue = _a.searchValue, tableBodyCols = _a.tableBodyCols, tableBodyRows = _a.tableBodyRows, tableDescription = _a.tableDescription, tableHeading = _a.tableHeading, tableHeadItems = _a.tableHeadItems, totalPages = _a.totalPages, _h = _a.translationLabels, translationLabels = _h === void 0 ? {} : _h, testIdWrapper = _a.testIdWrapper, testIdHeading = _a.testIdHeading, testIdTableDescription = _a.testIdTableDescription, testIdSearch = _a.testIdSearch, testIdHeaderActions = _a.testIdHeaderActions, testIdTableWrapper = _a.testIdTableWrapper, testIdRowPrefix = _a.testIdRowPrefix, testIdCellPrefix = _a.testIdCellPrefix, testIdNoResults = _a.testIdNoResults, testIdLoadingRowPrefix = _a.testIdLoadingRowPrefix, testIdPaginationWrapper = _a.testIdPaginationWrapper, testIdFooterPagination = _a.testIdFooterPagination, testIdFooterPage = _a.testIdFooterPage, testIdFooterAction = _a.testIdFooterAction, testIdWrapperRtl = _a.testIdWrapperRtl, testIdHeadingRtl = _a.testIdHeadingRtl, testIdTableDescriptionRtl = _a.testIdTableDescriptionRtl, testIdSearchRtl = _a.testIdSearchRtl, testIdHeaderActionsRtl = _a.testIdHeaderActionsRtl, testIdTableWrapperRtl = _a.testIdTableWrapperRtl, testIdRowPrefixRtl = _a.testIdRowPrefixRtl, testIdCellPrefixRtl = _a.testIdCellPrefixRtl, testIdNoResultsRtl = _a.testIdNoResultsRtl, testIdLoadingRowPrefixRtl = _a.testIdLoadingRowPrefixRtl, testIdPaginationWrapperRtl = _a.testIdPaginationWrapperRtl, testIdFooterPaginationRtl = _a.testIdFooterPaginationRtl, testIdFooterPageRtl = _a.testIdFooterPageRtl, testIdFooterActionRtl = _a.testIdFooterActionRtl;
     // Default translation values
     var defaultLabels = {
         booleanYes: "Yes",
@@ -56,6 +56,49 @@ var EnhancedTable = function (_a) {
     };
     // Merge provided labels with defaults
     var labels = __assign(__assign({}, defaultLabels), translationLabels);
+    // Resolve which test ids to use depending on `isRTL` mode.
+    var _testIdWrapper = isRTL
+        ? (testIdWrapperRtl !== null && testIdWrapperRtl !== void 0 ? testIdWrapperRtl : testIdWrapper)
+        : testIdWrapper;
+    var _testIdHeading = isRTL
+        ? (testIdHeadingRtl !== null && testIdHeadingRtl !== void 0 ? testIdHeadingRtl : testIdHeading)
+        : testIdHeading;
+    var _testIdTableDescription = isRTL
+        ? (testIdTableDescriptionRtl !== null && testIdTableDescriptionRtl !== void 0 ? testIdTableDescriptionRtl : testIdTableDescription)
+        : testIdTableDescription;
+    var _testIdSearch = isRTL
+        ? (testIdSearchRtl !== null && testIdSearchRtl !== void 0 ? testIdSearchRtl : testIdSearch)
+        : testIdSearch;
+    var _testIdHeaderActions = isRTL
+        ? (testIdHeaderActionsRtl !== null && testIdHeaderActionsRtl !== void 0 ? testIdHeaderActionsRtl : testIdHeaderActions)
+        : testIdHeaderActions;
+    var _testIdTableWrapper = isRTL
+        ? (testIdTableWrapperRtl !== null && testIdTableWrapperRtl !== void 0 ? testIdTableWrapperRtl : testIdTableWrapper)
+        : testIdTableWrapper;
+    var _testIdRowPrefix = isRTL
+        ? (testIdRowPrefixRtl !== null && testIdRowPrefixRtl !== void 0 ? testIdRowPrefixRtl : testIdRowPrefix)
+        : testIdRowPrefix;
+    var _testIdCellPrefix = isRTL
+        ? (testIdCellPrefixRtl !== null && testIdCellPrefixRtl !== void 0 ? testIdCellPrefixRtl : testIdCellPrefix)
+        : testIdCellPrefix;
+    var _testIdNoResults = isRTL
+        ? (testIdNoResultsRtl !== null && testIdNoResultsRtl !== void 0 ? testIdNoResultsRtl : testIdNoResults)
+        : testIdNoResults;
+    var _testIdLoadingRowPrefix = isRTL
+        ? (testIdLoadingRowPrefixRtl !== null && testIdLoadingRowPrefixRtl !== void 0 ? testIdLoadingRowPrefixRtl : testIdLoadingRowPrefix)
+        : testIdLoadingRowPrefix;
+    var _testIdPaginationWrapper = isRTL
+        ? (testIdPaginationWrapperRtl !== null && testIdPaginationWrapperRtl !== void 0 ? testIdPaginationWrapperRtl : testIdPaginationWrapper)
+        : testIdPaginationWrapper;
+    var _testIdFooterPagination = isRTL
+        ? (testIdFooterPaginationRtl !== null && testIdFooterPaginationRtl !== void 0 ? testIdFooterPaginationRtl : testIdFooterPagination)
+        : testIdFooterPagination;
+    var _testIdFooterPage = isRTL
+        ? (testIdFooterPageRtl !== null && testIdFooterPageRtl !== void 0 ? testIdFooterPageRtl : testIdFooterPage)
+        : testIdFooterPage;
+    var _testIdFooterAction = isRTL
+        ? (testIdFooterActionRtl !== null && testIdFooterActionRtl !== void 0 ? testIdFooterActionRtl : testIdFooterAction)
+        : testIdFooterAction;
     var renderCellContent = function (row, col) {
         var _a, _b;
         // Helper to safely resolve nested keys (max depth 3)
@@ -236,27 +279,38 @@ var EnhancedTable = function (_a) {
     };
     // Create loading skeleton rows
     var renderLoadingRows = function () {
-        return Array.from({ length: pageLimit || 5 }).map(function (_, index) { return (react_1.default.createElement(table_1.TableRow, { key: "loading-".concat(index), className: "hover:bg-muted/50" }, tableHeadItems.map(function (_, colIndex) { return (react_1.default.createElement(table_1.TableCell, { key: colIndex, className: "py-4" },
+        return Array.from({ length: pageLimit || 5 }).map(function (_, index) { return (react_1.default.createElement(table_1.TableRow, { key: "loading-".concat(index), className: "hover:bg-muted/50", "data-testid": _testIdLoadingRowPrefix
+                ? "".concat(_testIdLoadingRowPrefix, "-").concat(index)
+                : undefined }, tableHeadItems.map(function (_, colIndex) { return (react_1.default.createElement(table_1.TableCell, { key: colIndex, className: "py-4" },
             react_1.default.createElement("div", { className: "h-4 bg-muted animate-pulse rounded w-full" }))); }))); });
     };
-    return (react_1.default.createElement("div", { className: "space-y-4" },
+    return (react_1.default.createElement("div", { className: "space-y-4", "data-testid": _testIdWrapper },
         react_1.default.createElement("div", { className: "flex items-center justify-between" },
             react_1.default.createElement("div", { className: "space-y-1" },
-                react_1.default.createElement("h2", { className: "text-2xl font-bold tracking-tight" }, tableHeading),
-                tableDescription && (react_1.default.createElement("p", { className: "text-muted-foreground" }, tableDescription))),
+                react_1.default.createElement("h2", { className: "text-2xl font-bold tracking-tight", "data-testid": _testIdHeading }, tableHeading),
+                tableDescription && (react_1.default.createElement("p", { className: "text-muted-foreground", "data-testid": _testIdTableDescription }, tableDescription))),
             react_1.default.createElement("div", { className: "flex flex-row items-center justify-end gap-2" },
-                react_1.default.createElement(enhanced_table_header_search_1.EnhancedTableHeaderSearch, { handleSearchInput: handleSearchInput, loading: loading, searchDisabled: searchDisabled, searchEnabled: searchEnabled, searchId: searchId, searchPlaceholder: searchPlaceholder, searchValue: searchValue }),
-                react_1.default.createElement(enhanced_table_header_action_1.EnhancedTableHeaderAction, { headerActions: headerActions, numberOfFilters: numberOfFilters, onClearFilters: onClearFilters }))),
-        react_1.default.createElement("div", { className: "border rounded-md" },
+                react_1.default.createElement("div", { "data-testid": _testIdSearch },
+                    react_1.default.createElement(enhanced_table_header_search_1.EnhancedTableHeaderSearch, { handleSearchInput: handleSearchInput, loading: loading, searchDisabled: searchDisabled, searchEnabled: searchEnabled, searchId: searchId, searchPlaceholder: searchPlaceholder, searchValue: searchValue })),
+                react_1.default.createElement("div", { "data-testid": _testIdHeaderActions },
+                    react_1.default.createElement(enhanced_table_header_action_1.EnhancedTableHeaderAction, { headerActions: headerActions, numberOfFilters: numberOfFilters, onClearFilters: onClearFilters })))),
+        react_1.default.createElement("div", { className: "border rounded-md", "data-testid": _testIdTableWrapper },
             react_1.default.createElement(table_1.Table, null,
                 react_1.default.createElement(table_1.TableHeader, null,
                     react_1.default.createElement(table_1.TableRow, null, tableHeadItems.map(function (header, index) { return (react_1.default.createElement(table_1.TableHead, { key: index, style: { width: header.width }, className: (0, utils_1.cn)("font-medium", index === 0 && "rounded-tl-md", index === tableHeadItems.length - 1 && "rounded-tr-md") }, header.label)); }))),
                 react_1.default.createElement(table_1.TableBody, null, loading ? (renderLoadingRows()) : tableBodyRows.length === 0 ? (react_1.default.createElement(table_1.TableRow, null,
-                    react_1.default.createElement(table_1.TableCell, { colSpan: tableHeadItems.length, className: "h-24 text-center text-muted-foreground" }, labels.noResultsFound))) : (tableBodyRows.map(function (row, rowIndex) { return (react_1.default.createElement(table_1.TableRow, { key: rowIndex, className: "hover:bg-muted/50" }, tableBodyCols.map(function (col, colIndex) { return (react_1.default.createElement(table_1.TableCell, { key: colIndex, className: "py-4" }, renderCellContent(row, col))); }))); }))))),
-        react_1.default.createElement("div", { className: "flex items-center justify-between" },
-            react_1.default.createElement(enhanced_table_footer_pagination_1.EnhancedTableFooterPagination, { handleOnSelect: handleOnSelect, isRTL: isRTL, listOptions: listOptions, loading: loading, nodeSelectKey: nodeSelectKey, pageLimit: pageLimit, rowsPerPageLabel: labels.rowsPerPage, totalPages: totalPages }),
+                    react_1.default.createElement(table_1.TableCell, { colSpan: tableHeadItems.length, className: "h-24 text-center text-muted-foreground", "data-testid": _testIdNoResults }, labels.noResultsFound))) : (tableBodyRows.map(function (row, rowIndex) { return (react_1.default.createElement(table_1.TableRow, { key: rowIndex, className: "hover:bg-muted/50", "data-testid": _testIdRowPrefix
+                        ? "".concat(_testIdRowPrefix, "-").concat(rowIndex)
+                        : undefined }, tableBodyCols.map(function (col, colIndex) { return (react_1.default.createElement(table_1.TableCell, { key: colIndex, className: "py-4", "data-testid": _testIdCellPrefix
+                        ? "".concat(_testIdCellPrefix, "-").concat(rowIndex, "-").concat(colIndex)
+                        : undefined }, renderCellContent(row, col))); }))); }))))),
+        react_1.default.createElement("div", { className: "flex items-center justify-between", "data-testid": _testIdPaginationWrapper },
+            react_1.default.createElement("div", { "data-testid": _testIdFooterPagination },
+                react_1.default.createElement(enhanced_table_footer_pagination_1.EnhancedTableFooterPagination, { handleOnSelect: handleOnSelect, isRTL: isRTL, listOptions: listOptions, loading: loading, nodeSelectKey: nodeSelectKey, pageLimit: pageLimit, rowsPerPageLabel: labels.rowsPerPage, totalPages: totalPages })),
             react_1.default.createElement("div", { className: "flex items-center gap-4" },
-                react_1.default.createElement(enhanced_table_footer_page_1.EnhancedTableFooterPage, { currentPage: currentPage, isRTL: isRTL, loading: loading, loadingLabel: labels.loading, ofLabel: labels.of, pageLabel: labels.page, totalPages: totalPages }),
-                react_1.default.createElement(enhanced_table_footer_action_1.EnhancedTableFooterAction, { handleNextOnClick: handleNextOnClick, handlePreviousOnClick: handlePreviousOnClick, isNextDisabled: isNextDisabled, isPreviousDisabled: isPreviousDisabled, isRTL: isRTL, loading: loading, nextPageLabel: labels.nextPage, previousPageLabel: labels.previousPage })))));
+                react_1.default.createElement("div", { "data-testid": _testIdFooterPage },
+                    react_1.default.createElement(enhanced_table_footer_page_1.EnhancedTableFooterPage, { currentPage: currentPage, isRTL: isRTL, loading: loading, loadingLabel: labels.loading, ofLabel: labels.of, pageLabel: labels.page, totalPages: totalPages })),
+                react_1.default.createElement("div", { "data-testid": _testIdFooterAction },
+                    react_1.default.createElement(enhanced_table_footer_action_1.EnhancedTableFooterAction, { handleNextOnClick: handleNextOnClick, handlePreviousOnClick: handlePreviousOnClick, isNextDisabled: isNextDisabled, isPreviousDisabled: isPreviousDisabled, isRTL: isRTL, loading: loading, nextPageLabel: labels.nextPage, previousPageLabel: labels.previousPage }))))));
 };
 exports.EnhancedTable = EnhancedTable;

package/components/enhanced-textarea.d.ts

@@ -1,8 +1,24 @@
 import * as React from "react";
+/** Props for `EnhancedTextarea` component. */
 interface EnhancedTextareaProps extends React.ComponentProps<"textarea"> {
+    /** Error message text shown below the textarea; sets error styling when present. */
     error?: string;
+    /** Informational helper text shown below the textarea (when no error). */
     info?: string;
+    /** Optional label text displayed above the textarea. */
     label?: string;
+    /** `data-testid` for the root wrapper (outermost `div`). */
+    testIdWrapper?: string;
+    /** `data-testid` for the label element (forwards to `EnhancedLabel`). */
+    testIdLabel?: string;
+    /** `data-testid` for the native textarea element. */
+    testIdTextarea?: string;
+    /** `data-testid` for the message container (holds error/info). */
+    testIdMessage?: string;
+    /** `data-testid` for the error text element. */
+    testIdError?: string;
+    /** `data-testid` for the info text element. */
+    testIdInfo?: string;
 }
 declare const EnhancedTextarea: React.ForwardRefExoticComponent<Omit<EnhancedTextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export { EnhancedTextarea };

package/components/enhanced-textarea.js

@@ -61,10 +61,10 @@ var utils_1 = require("../lib/utils");
 var textarea_1 = require("./ui/textarea");
 var enhanced_label_1 = require("./enhanced-label");
 var EnhancedTextarea = React.forwardRef(function (_a, ref) {
-    var className = _a.className, error = _a.error, info = _a.info, label = _a.label, required = _a.required, id = _a.id, props = __rest(_a, ["className", "error", "info", "label", "required", "id"]);
+    var className = _a.className, error = _a.error, info = _a.info, label = _a.label, required = _a.required, id = _a.id, testIdWrapper = _a.testIdWrapper, testIdLabel = _a.testIdLabel, testIdTextarea = _a.testIdTextarea, testIdMessage = _a.testIdMessage, testIdError = _a.testIdError, testIdInfo = _a.testIdInfo, props = __rest(_a, ["className", "error", "info", "label", "required", "id", "testIdWrapper", "testIdLabel", "testIdTextarea", "testIdMessage", "testIdError", "testIdInfo"]);
     // Determine if there's an error (for aria-invalid and styling)
     var hasError = Boolean(error);
-    var textareaElement = (React.createElement(textarea_1.Textarea, __assign({ ref: ref, id: id, "aria-invalid": hasError, required: required, className: (0, utils_1.cn)(
+    var textareaElement = (React.createElement(textarea_1.Textarea, __assign({ ref: ref, id: id, "data-testid": testIdTextarea, "aria-invalid": hasError, required: required, className: (0, utils_1.cn)(
         // Error state styling
         hasError &&
             "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20", 
@@ -73,15 +73,15 @@ var EnhancedTextarea = React.forwardRef(function (_a, ref) {
             "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className) }, props)));
     // If label is provided, render the complete textarea with label structure
     if (label) {
-        return (React.createElement("div", { className: "w-full space-y-2" },
-            React.createElement(enhanced_label_1.EnhancedLabel, { htmlFor: id, required: required }, label),
+        return (React.createElement("div", { className: "w-full space-y-2", "data-testid": testIdWrapper },
+            React.createElement(enhanced_label_1.EnhancedLabel, { htmlFor: id, required: required, testIdLabel: testIdLabel }, label),
             textareaElement,
-            (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))));
+            (error || info) && (React.createElement("div", { "data-testid": testIdMessage }, error ? (React.createElement("p", { className: "text-xs text-destructive", "data-testid": testIdError }, error)) : info ? (React.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400", "data-testid": testIdInfo }, info)) : null))));
     }
     // If no label, render just the textarea with messages (backward compatibility)
-    return (React.createElement("div", { className: "w-full" },
+    return (React.createElement("div", { className: "w-full", "data-testid": testIdWrapper },
         textareaElement,
-        (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))));
+        (error || info) && (React.createElement("div", { "data-testid": testIdMessage }, error ? (React.createElement("p", { className: "text-xs text-destructive", "data-testid": testIdError }, error)) : info ? (React.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400", "data-testid": testIdInfo }, info)) : null))));
 });
 exports.EnhancedTextarea = EnhancedTextarea;
 EnhancedTextarea.displayName = "EnhancedTextarea";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/shadcn",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "scripts": {
     "build:next": "next build",
     "build:storybook": "storybook build -c .storybook -o .out",