@teja-app/ui 0.0.5 → 0.0.7

package/dist/index.js

@@ -150,6 +150,7 @@ const Spinner = forwardRef(
     color = "current",
     label = "Loading",
     className,
+    testId,
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsxs(
@@ -167,6 +168,7 @@ const Spinner = forwardRef(
         xmlns: "http://www.w3.org/2000/svg",
         role: "status",
         "aria-label": label,
+        "data-testid": testId,
         ...props,
         children: [
           /* @__PURE__ */ jsx(
@@ -207,18 +209,20 @@ const Input = forwardRef(
     required,
     disabled,
     isLoading = false,
+    testId,
     ...props
   }, ref) => {
     const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
     const hasError = !!error2;
     const errorId = hasError ? `${inputId}-error` : void 0;
     const showRightIcon = rightIcon || isLoading;
-    return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto"), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto"), "data-testid": testId, children: [
       label && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: inputId,
           className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white",
+          "data-testid": testId ? `${testId}-label` : void 0,
           children: [
             label,
             required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -226,7 +230,14 @@ const Input = forwardRef(
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        leftIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-primary-400 dark:text-primary-500", children: leftIcon }),
+        leftIcon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-primary-400 dark:text-primary-500",
+            "data-testid": testId ? `${testId}-left-icon` : void 0,
+            children: leftIcon
+          }
+        ),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -237,6 +248,7 @@ const Input = forwardRef(
             "aria-label": !label ? props.placeholder || "Input" : void 0,
             "aria-invalid": hasError ? "true" : void 0,
             "aria-describedby": errorId,
+            "data-testid": testId ? `${testId}-input` : void 0,
             className: cn(
               // Base styles - Light mode
               "block w-full rounded-md border bg-white px-4 py-2.5 text-sm text-primary-900",
@@ -259,13 +271,21 @@ const Input = forwardRef(
             ...props
           }
         ),
-        showRightIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-primary-400 dark:text-primary-500", children: isLoading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "primary" }) : rightIcon })
+        showRightIcon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-primary-400 dark:text-primary-500",
+            "data-testid": testId ? `${testId}-right-icon` : void 0,
+            children: isLoading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "primary" }) : rightIcon
+          }
+        )
       ] }),
       (error2 || helperText) && /* @__PURE__ */ jsx(
         "p",
         {
           id: errorId,
           role: hasError ? "alert" : void 0,
+          "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
           className: cn(
             "mt-1.5 text-sm",
             hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -345,7 +365,7 @@ function getPasswordStrength(password) {
   }
 }
 const PasswordInput = forwardRef(
-  ({ showStrengthIndicator = false, value, className, ...props }, ref) => {
+  ({ showStrengthIndicator = false, value, className, testId, ...props }, ref) => {
     const [showPassword, setShowPassword] = useState(false);
     const togglePasswordVisibility = () => {
       setShowPassword((prev) => !prev);
@@ -364,10 +384,11 @@ const PasswordInput = forwardRef(
           "dark:text-primary-500 dark:hover:text-primary-300"
         ),
         "aria-label": showPassword ? "Hide password" : "Show password",
+        "data-testid": testId ? `${testId}-toggle-button` : void 0,
         children: showPassword ? /* @__PURE__ */ jsx(EyeSlashIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
       }
     );
-    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), "data-testid": testId, children: [
       /* @__PURE__ */ jsx(
         Input,
         {
@@ -375,7 +396,8 @@ const PasswordInput = forwardRef(
           ref,
           type: showPassword ? "text" : "password",
           value,
-          rightIcon: toggleButton
+          rightIcon: toggleButton,
+          testId: testId ? `${testId}-input` : void 0
         }
       ),
       showStrengthIndicator && passwordValue && strength && strength.label && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
@@ -424,6 +446,7 @@ const Textarea = forwardRef(
     defaultValue,
     onChange,
     isLoading = false,
+    testId,
     ...props
   }, ref) => {
     const textareaId = id || label?.toLowerCase().replace(/\s+/g, "-");
@@ -464,12 +487,13 @@ const Textarea = forwardRef(
         adjustHeight();
       }
     }, [autoResize, adjustHeight, value, defaultValue]);
-    return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto"), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto"), "data-testid": testId, children: [
       label && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: textareaId,
           className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white",
+          "data-testid": testId ? `${testId}-label` : void 0,
           children: [
             label,
             required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -492,6 +516,7 @@ const Textarea = forwardRef(
             "aria-invalid": hasError ? "true" : void 0,
             "aria-describedby": errorId,
             onChange: handleChange,
+            "data-testid": testId ? `${testId}-textarea` : void 0,
             className: cn(
               // Base styles - Light mode
               "block w-full rounded-md border bg-white px-4 py-2.5 text-sm text-primary-900",
@@ -522,6 +547,7 @@ const Textarea = forwardRef(
           {
             id: errorId,
             role: hasError ? "alert" : void 0,
+            "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
             className: cn(
               "text-sm",
               hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -7223,18 +7249,20 @@ function Select({
   className,
   isLoading = false,
   loadingText = "Loading...",
-  placement = "bottom"
+  placement = "bottom",
+  testId
 }) {
   const selectedOption = options.find((opt) => opt.value === value);
   const hasError = !!error2;
   const isDisabled = disabled || isLoading;
   const labelId = useId$1();
-  return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto", className), "data-testid": testId, children: [
     label && /* @__PURE__ */ jsxs(
       "label",
       {
         id: labelId,
         className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white",
+        "data-testid": testId ? `${testId}-label` : void 0,
         children: [
           label,
           required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -7247,6 +7275,7 @@ function Select({
         {
           "aria-label": !label ? placeholder : void 0,
           "aria-labelledby": label ? labelId : void 0,
+          "data-testid": testId ? `${testId}-button` : void 0,
           className: cn(
             // Base styles - Light mode
             "relative w-full rounded-md border bg-white px-4 py-2.5 text-left text-sm",
@@ -7300,15 +7329,18 @@ function Select({
           children: /* @__PURE__ */ jsx(
             Bt,
             {
+              portal: true,
               className: cn(
                 "absolute z-dropdown max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-primary-800 dark:ring-primary-700",
                 placement === "top" ? "bottom-full mb-1" : "top-full mt-1"
               ),
-              children: options.map((option) => /* @__PURE__ */ jsx(
+              "data-testid": testId ? `${testId}-options` : void 0,
+              children: options.map((option, index2) => /* @__PURE__ */ jsx(
                 It,
                 {
                   disabled: option.disabled,
                   value: option.value,
+                  "data-testid": testId ? `${testId}-option-${index2}` : void 0,
                   className: ({ active, selected }) => cn(
                     "relative cursor-pointer select-none py-2.5 pl-10 pr-4",
                     // Light mode
@@ -7350,6 +7382,7 @@ function Select({
       "p",
       {
         role: hasError ? "alert" : void 0,
+        "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
         className: cn(
           "mt-1.5 text-sm",
           hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -7395,7 +7428,8 @@ function Modal({
   footer,
   closeOnOverlay = true,
   className,
-  isLoading = false
+  isLoading = false,
+  testId
 }) {
   const handleClose = closeOnOverlay ? onClose : () => {
   };
@@ -7410,7 +7444,7 @@ function Modal({
         leave: "ease-in duration-100",
         leaveFrom: "opacity-100",
         leaveTo: "opacity-0",
-        children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/40 backdrop-blur-sm" })
+        children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/40 backdrop-blur-sm", "data-testid": testId ? `${testId}-overlay` : void 0 })
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx(
@@ -7435,6 +7469,7 @@ function Modal({
               sizeStyles$b[size2],
               className
             ),
+            "data-testid": testId,
             children: [
               (title || showCloseButton) && /* @__PURE__ */ jsxs(
                 "div",
@@ -7443,6 +7478,7 @@ function Modal({
                     "flex items-start justify-between px-6 py-4",
                     (children || footer) && "border-b border-primary-200 dark:border-primary-700"
                   ),
+                  "data-testid": testId ? `${testId}-header` : void 0,
                   children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
                       title && /* @__PURE__ */ jsx(Qe, { className: "text-lg font-semibold text-primary-900 dark:text-white", children: title }),
@@ -7461,13 +7497,14 @@ function Modal({
                           "focus:outline-none focus:ring-2 focus:ring-gold-500/20",
                           "transition-colors"
                         ),
+                        "data-testid": testId ? `${testId}-close-button` : void 0,
                         children: /* @__PURE__ */ jsx(CloseIcon$2, {})
                       }
                     )
                   ]
                 }
               ),
-              children && /* @__PURE__ */ jsxs("div", { className: "relative px-6 py-4 text-primary-700 dark:text-primary-300", children: [
+              children && /* @__PURE__ */ jsxs("div", { className: "relative px-6 py-4 text-primary-700 dark:text-primary-300", "data-testid": testId ? `${testId}-body` : void 0, children: [
                 children,
                 isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white/60 dark:bg-primary-800/60", children: /* @__PURE__ */ jsx(Spinner, { size: "md", color: "primary" }) })
               ] }),
@@ -7480,6 +7517,7 @@ function Modal({
                     "bg-primary-50 dark:bg-primary-900/50",
                     "rounded-b-lg"
                   ),
+                  "data-testid": testId ? `${testId}-footer` : void 0,
                   children: footer
                 }
               )
@@ -7524,7 +7562,8 @@ function Drawer({
   showCloseButton = true,
   footer,
   className,
-  isLoading = false
+  isLoading = false,
+  testId
 }) {
   return /* @__PURE__ */ jsx(Ke$2, { show: isOpen, as: Fragment$1, children: /* @__PURE__ */ jsxs(ht$1, { className: "relative z-50", onClose, children: [
     /* @__PURE__ */ jsx(
@@ -7537,7 +7576,7 @@ function Drawer({
         leave: "ease-in duration-200",
         leaveFrom: "opacity-100",
         leaveTo: "opacity-0",
-        children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/40 backdrop-blur-sm" })
+        children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/40 backdrop-blur-sm", "data-testid": testId ? `${testId}-overlay` : void 0 })
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "fixed inset-0 flex justify-end", children: /* @__PURE__ */ jsx(
@@ -7562,6 +7601,7 @@ function Drawer({
               sizeStyles$a[size2],
               className
             ),
+            "data-testid": testId,
             children: [
               (title || showCloseButton) && /* @__PURE__ */ jsxs(
                 "div",
@@ -7585,13 +7625,14 @@ function Drawer({
                           "focus:outline-none focus:ring-2 focus:ring-gold-500/20",
                           "transition-colors"
                         ),
+                        "data-testid": testId ? `${testId}-close-button` : void 0,
                         children: /* @__PURE__ */ jsx(CloseIcon$1, {})
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-y-auto px-6 py-4 text-primary-700 dark:text-primary-300", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-y-auto px-6 py-4 text-primary-700 dark:text-primary-300", "data-testid": testId ? `${testId}-content` : void 0, children: [
                 children,
                 isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white/60 dark:bg-primary-800/60", children: /* @__PURE__ */ jsx(Spinner, { size: "md", color: "primary" }) })
               ] }),
@@ -7629,7 +7670,8 @@ function ConfirmDialog({
   variant = "neutral",
   cancelText = "Cancel",
   confirmText = "Confirm",
-  loading = false
+  loading = false,
+  testId
 }) {
   const buttonVariant = variantToButton[variant];
   const handleConfirm = () => {
@@ -7645,6 +7687,7 @@ function ConfirmDialog({
       size: "sm",
       showCloseButton: false,
       closeOnOverlay: !loading,
+      testId,
       footer: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3", children: [
         /* @__PURE__ */ jsx(
           Button,
@@ -7652,6 +7695,7 @@ function ConfirmDialog({
             variant: "secondary",
             onClick: onClose,
             disabled: loading,
+            "data-testid": testId ? `${testId}-cancel-button` : void 0,
             children: cancelText
           }
         ),
@@ -7661,6 +7705,7 @@ function ConfirmDialog({
             variant: buttonVariant,
             onClick: handleConfirm,
             disabled: loading,
+            "data-testid": testId ? `${testId}-confirm-button` : void 0,
             children: loading ? "Loading..." : confirmText
           }
         )
@@ -7700,6 +7745,7 @@ const Card = forwardRef(
     hoverable = false,
     children,
     className,
+    testId,
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -7725,6 +7771,7 @@ const Card = forwardRef(
           ],
           className
         ),
+        "data-testid": testId,
         ...props,
         children
       }
@@ -7754,6 +7801,7 @@ const Checkbox = forwardRef(
     indeterminate = false,
     className,
     id,
+    testId,
     ...props
   }, forwardedRef) => {
     const checkboxId = id || label?.toLowerCase().replace(/\s+/g, "-");
@@ -7780,7 +7828,7 @@ const Checkbox = forwardRef(
     const handleChange = (e3) => {
       onChange?.(e3.target.checked);
     };
-    return /* @__PURE__ */ jsxs("div", { className, children: [
+    return /* @__PURE__ */ jsxs("div", { className, "data-testid": testId, children: [
       /* @__PURE__ */ jsxs(
         "label",
         {
@@ -7789,6 +7837,7 @@ const Checkbox = forwardRef(
             "inline-flex items-center gap-2",
             disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
           ),
+          "data-testid": testId ? `${testId}-label` : void 0,
           children: [
             /* @__PURE__ */ jsx(
               "input",
@@ -7801,6 +7850,7 @@ const Checkbox = forwardRef(
                 "aria-invalid": hasError ? "true" : void 0,
                 "aria-describedby": errorId,
                 onChange: handleChange,
+                "data-testid": testId ? `${testId}-checkbox` : void 0,
                 className: cn(
                   sizeStyles$9[size2],
                   "rounded border transition-colors",
@@ -7845,6 +7895,7 @@ const Checkbox = forwardRef(
         {
           id: errorId,
           role: hasError ? "alert" : void 0,
+          "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
           className: cn(
             "mt-1 text-sm",
             hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -7874,6 +7925,7 @@ const Radio = forwardRef(
     error: error2 = false,
     className,
     id,
+    testId,
     ...props
   }, ref) => {
     const radioId = id || (label ? `${props.name}-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
@@ -7886,6 +7938,7 @@ const Radio = forwardRef(
           disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
           className
         ),
+        "data-testid": testId,
         children: [
           /* @__PURE__ */ jsx(
             "input",
@@ -7894,6 +7947,7 @@ const Radio = forwardRef(
               type: "radio",
               id: radioId,
               disabled,
+              "data-testid": testId ? `${testId}-radio` : void 0,
               className: cn(
                 sizeStyles$8[size2],
                 "border transition-colors",
@@ -7925,6 +7979,7 @@ const Radio = forwardRef(
                 "text-primary-700 dark:text-primary-200",
                 error2 && "text-error"
               ),
+              "data-testid": testId ? `${testId}-label` : void 0,
               children: label
             }
           )
@@ -7946,7 +8001,8 @@ function RadioGroup({
   disabled = false,
   orientation = "vertical",
   className,
-  isLoading = false
+  isLoading = false,
+  testId
 }) {
   const hasError = !!error2;
   const groupId = `${name}-group`;
@@ -7954,7 +8010,7 @@ function RadioGroup({
   const handleChange = (e3) => {
     onChange?.(e3.target.value);
   };
-  return /* @__PURE__ */ jsxs("fieldset", { className, role: "radiogroup", "aria-labelledby": label ? groupId : void 0, children: [
+  return /* @__PURE__ */ jsxs("fieldset", { className, role: "radiogroup", "aria-labelledby": label ? groupId : void 0, "data-testid": testId, children: [
     label && /* @__PURE__ */ jsxs(
       "legend",
       {
@@ -7972,7 +8028,7 @@ function RadioGroup({
         className: cn(
           orientation === "vertical" ? "space-y-2" : "flex flex-wrap gap-4"
         ),
-        children: options.map((option) => /* @__PURE__ */ jsx(
+        children: options.map((option, index2) => /* @__PURE__ */ jsx(
           Radio,
           {
             name,
@@ -7982,7 +8038,8 @@ function RadioGroup({
             disabled: isDisabled || option.disabled,
             error: hasError,
             checked: value === option.value,
-            onChange: handleChange
+            onChange: handleChange,
+            testId: testId ? `${testId}-option-${index2}` : void 0
           },
           option.value
         ))
@@ -7992,6 +8049,7 @@ function RadioGroup({
       "p",
       {
         role: hasError ? "alert" : void 0,
+        "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
         className: cn(
           "mt-2 text-sm",
           hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -8027,11 +8085,12 @@ function Toggle({
   disabled = false,
   size: size2 = "md",
   className,
-  isLoading = false
+  isLoading = false,
+  testId
 }) {
   const currentSize = sizeStyles$7[size2];
   const isDisabled = disabled || isLoading;
-  return /* @__PURE__ */ jsx(W, { className, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsx(W, { className, "data-testid": testId, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
     (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex-1 mr-4", children: [
       label && /* @__PURE__ */ jsx(
         Z,
@@ -8053,6 +8112,7 @@ function Toggle({
         disabled: isDisabled,
         onChange,
         "aria-label": !label ? "Toggle" : void 0,
+        "data-testid": testId ? `${testId}-toggle` : void 0,
         className: cn(
           currentSize.switch,
           "relative inline-flex shrink-0 cursor-pointer rounded-full",
@@ -8138,7 +8198,8 @@ function Combobox({
   isLoading = false,
   loadingText = "Loading...",
   emptyText = "No results found",
-  onSearch
+  onSearch,
+  testId
 }) {
   const [query, setQuery] = useState("");
   const hasError = !!error2;
@@ -8158,12 +8219,13 @@ function Combobox({
     onChange?.(newValue);
     setQuery("");
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto", className), "data-testid": testId, children: [
     label && /* @__PURE__ */ jsxs(
       "label",
       {
         id: labelId,
         className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white",
+        "data-testid": testId ? `${testId}-label` : void 0,
         children: [
           label,
           required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -8190,6 +8252,7 @@ function Combobox({
                   onSearch?.(newQuery);
                 },
                 placeholder,
+                "data-testid": testId ? `${testId}-input` : void 0,
                 className: cn(
                   // Base styles - Light mode
                   "w-full rounded-md border bg-white px-4 py-2.5 pr-10 text-sm text-primary-900",
@@ -8223,30 +8286,39 @@ function Combobox({
               leaveFrom: "opacity-100",
               leaveTo: "opacity-0",
               afterLeave: () => setQuery(""),
-              children: /* @__PURE__ */ jsx(Uo, { className: "absolute z-dropdown mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-primary-800 dark:ring-primary-700", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-2.5 text-primary-500 dark:text-primary-400", children: [
-                /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "primary" }),
-                /* @__PURE__ */ jsx("span", { children: loadingText })
-              ] }) : filteredOptions.length === 0 && query !== "" ? /* @__PURE__ */ jsx("div", { className: "relative cursor-default select-none px-4 py-2.5 text-primary-500 dark:text-primary-400", children: emptyText }) : filteredOptions.map((option) => /* @__PURE__ */ jsx(
-                Ho,
+              children: /* @__PURE__ */ jsx(
+                Uo,
                 {
-                  value: option.value,
-                  disabled: option.disabled,
-                  className: ({ active, selected }) => cn(
-                    "relative cursor-pointer select-none py-2.5 pl-10 pr-4",
-                    // Light mode
-                    active ? "bg-gold-50 text-primary-900" : "text-primary-900",
-                    // Dark mode
-                    active ? "dark:bg-primary-700 dark:text-primary-100" : "dark:text-primary-200",
-                    option.disabled && "cursor-not-allowed opacity-50",
-                    selected && "font-medium"
-                  ),
-                  children: ({ selected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("span", { className: "block truncate", children: option.label }),
-                    selected && /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 text-gold-600 dark:text-gold-400", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
-                  ] })
-                },
-                option.value
-              )) })
+                  portal: true,
+                  className: "absolute z-dropdown mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-primary-800 dark:ring-primary-700",
+                  "data-testid": testId ? `${testId}-options` : void 0,
+                  children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-2.5 text-primary-500 dark:text-primary-400", children: [
+                    /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "primary" }),
+                    /* @__PURE__ */ jsx("span", { children: loadingText })
+                  ] }) : filteredOptions.length === 0 && query !== "" ? /* @__PURE__ */ jsx("div", { className: "relative cursor-default select-none px-4 py-2.5 text-primary-500 dark:text-primary-400", children: emptyText }) : filteredOptions.map((option, index2) => /* @__PURE__ */ jsx(
+                    Ho,
+                    {
+                      value: option.value,
+                      disabled: option.disabled,
+                      "data-testid": testId ? `${testId}-option-${index2}` : void 0,
+                      className: ({ active, selected }) => cn(
+                        "relative cursor-pointer select-none py-2.5 pl-10 pr-4",
+                        // Light mode
+                        active ? "bg-gold-50 text-primary-900" : "text-primary-900",
+                        // Dark mode
+                        active ? "dark:bg-primary-700 dark:text-primary-100" : "dark:text-primary-200",
+                        option.disabled && "cursor-not-allowed opacity-50",
+                        selected && "font-medium"
+                      ),
+                      children: ({ selected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("span", { className: "block truncate", children: option.label }),
+                        selected && /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 text-gold-600 dark:text-gold-400", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+                      ] })
+                    },
+                    option.value
+                  ))
+                }
+              )
             }
           )
         ] })
@@ -8256,6 +8328,7 @@ function Combobox({
       "p",
       {
         role: hasError ? "alert" : void 0,
+        "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
         className: cn(
           "mt-1.5 text-sm",
           hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -8298,7 +8371,7 @@ const sizeStyles$6 = {
   lg: "px-3 py-1.5 text-base"
 };
 const Badge = forwardRef(
-  ({ variant = "default", size: size2 = "md", children, className, ...props }, ref) => {
+  ({ variant = "default", size: size2 = "md", children, className, testId, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "span",
       {
@@ -8309,6 +8382,7 @@ const Badge = forwardRef(
           sizeStyles$6[size2],
           className
         ),
+        "data-testid": testId,
         ...props,
         children
       }
@@ -8478,6 +8552,7 @@ function Tabs({
   size: size2 = "md",
   className,
   "aria-label": ariaLabel = "Navigation tabs",
+  testId,
   ...props
 }) {
   const selectedIndex = useMemo(
@@ -8505,11 +8580,13 @@ function Tabs({
             fullWidth && "w-full",
             className
           ),
+          "data-testid": testId,
           ...props,
-          children: tabs.map((tab) => /* @__PURE__ */ jsx(
+          children: tabs.map((tab, index2) => /* @__PURE__ */ jsx(
             dt,
             {
               disabled: tab.disabled,
+              "data-testid": testId ? `${testId}-tab-${index2}` : void 0,
               className: ({ selected }) => cn(
                 "relative outline-none transition-colors duration-normal",
                 "focus-visible:ring-2 focus-visible:ring-gold-500/50",
@@ -8556,6 +8633,7 @@ function TabContentPanels({
   children,
   className,
   isLoading = false,
+  testId,
   ...props
 }) {
   const activeContent = activeTab && children[activeTab];
@@ -8564,6 +8642,7 @@ function TabContentPanels({
     {
       role: "tabpanel",
       className: cn("relative mt-4", className),
+      "data-testid": testId,
       ...props,
       children: [
         activeContent,
@@ -8628,6 +8707,7 @@ const Breadcrumbs = forwardRef(
     maxItems = 0,
     renderLink,
     className,
+    testId,
     ...props
   }, ref) => {
     const [isExpanded, setIsExpanded] = useState(false);
@@ -8679,12 +8759,20 @@ const Breadcrumbs = forwardRef(
         ref,
         "aria-label": "Breadcrumb",
         className: cn("text-sm", className),
+        "data-testid": testId,
         ...props,
         children: /* @__PURE__ */ jsx("ol", { className: "flex items-center flex-wrap gap-1", children: displayItems.map((item, index2) => {
           const isLast = index2 === displayItems.length - 1;
           const showEllipsis = shouldCollapse && index2 === 0;
           return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsx("li", { className: "inline-flex items-center", children: renderItem(item, index2, isLast) }),
+            /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: "inline-flex items-center",
+                "data-testid": testId ? `${testId}-item-${index2}` : void 0,
+                children: renderItem(item, index2, isLast)
+              }
+            ),
             showEllipsis && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("li", { className: "inline-flex items-center", "aria-hidden": "true", children: separatorElement }),
               /* @__PURE__ */ jsx("li", { className: "inline-flex items-center", children: /* @__PURE__ */ jsx(EllipsisButton, { onClick: () => setIsExpanded(true) }) })
@@ -8712,6 +8800,7 @@ const Skeleton = forwardRef(
     label = "Loading...",
     className,
     style,
+    testId,
     ...props
   }, ref) => {
     const widthValue = typeof width === "number" ? `${width}px` : width;
@@ -8726,6 +8815,7 @@ const Skeleton = forwardRef(
           role: "status",
           "aria-label": label,
           "aria-busy": "true",
+          "data-testid": testId,
           ...props,
           children: [
             Array.from({ length: lines }).map((_2, index2) => /* @__PURE__ */ jsx(
@@ -8767,6 +8857,7 @@ const Skeleton = forwardRef(
         role: "status",
         "aria-label": label,
         "aria-busy": "true",
+        "data-testid": testId,
         ...props,
         children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
       }
@@ -8867,6 +8958,7 @@ const EmptyState = forwardRef(
     action,
     size: size2 = "md",
     className,
+    testId,
     ...props
   }, ref) => {
     const styles = sizeStyles$4[size2];
@@ -8879,9 +8971,17 @@ const EmptyState = forwardRef(
           styles.container,
           className
         ),
+        "data-testid": testId,
         ...props,
         children: [
-          /* @__PURE__ */ jsx("div", { className: cn(styles.icon, typeColors[type], "mb-4"), children: icon || defaultIcons$1[type] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(styles.icon, typeColors[type], "mb-4"),
+              "data-testid": testId ? `${testId}-icon` : void 0,
+              children: icon || defaultIcons$1[type]
+            }
+          ),
           /* @__PURE__ */ jsx(
             "h3",
             {
@@ -8890,6 +8990,7 @@ const EmptyState = forwardRef(
                 "text-primary-900 dark:text-primary-100",
                 "mb-1"
               ),
+              "data-testid": testId ? `${testId}-title` : void 0,
               children: title
             }
           ),
@@ -8901,10 +9002,11 @@ const EmptyState = forwardRef(
                 "text-primary-500 dark:text-primary-400",
                 "max-w-sm mb-4"
               ),
+              "data-testid": testId ? `${testId}-description` : void 0,
               children: description
             }
           ),
-          action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
+          action && /* @__PURE__ */ jsx("div", { className: "mt-2", "data-testid": testId ? `${testId}-action` : void 0, children: action })
         ]
       }
     );
@@ -8960,7 +9062,8 @@ function Pagination({
   totalItems,
   disabled = false,
   size: size2 = "md",
-  className
+  className,
+  testId
 }) {
   const pageSizeId = useId$1();
   const currentSize = sizeStyles$3[size2];
@@ -8993,13 +9096,14 @@ function Pagination({
   };
   if (variant === "load-more") {
     if (!canGoNext) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex justify-center", className), children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: cn("flex justify-center", className), "data-testid": testId, children: /* @__PURE__ */ jsx(
       Button,
       {
         variant: "secondary",
         size: size2 === "sm" ? "sm" : "md",
         onClick: handleNext,
         disabled,
+        "data-testid": testId ? `${testId}-load-more` : void 0,
         children: "Load more"
       }
     ) });
@@ -9010,6 +9114,7 @@ function Pagination({
       {
         "aria-label": "Pagination",
         className: cn("flex items-center justify-between gap-4", className),
+        "data-testid": testId,
         children: [
           /* @__PURE__ */ jsxs(
             Button,
@@ -9019,6 +9124,7 @@ function Pagination({
               onClick: handlePrevious,
               disabled: disabled || !canGoPrevious,
               "aria-label": "Previous page",
+              "data-testid": testId ? `${testId}-prev` : void 0,
               children: [
                 /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
                 /* @__PURE__ */ jsx("span", { className: "ml-1", children: "Previous" })
@@ -9039,6 +9145,7 @@ function Pagination({
               onClick: handleNext,
               disabled: disabled || !canGoNext,
               "aria-label": "Next page",
+              "data-testid": testId ? `${testId}-next` : void 0,
               children: [
                 /* @__PURE__ */ jsx("span", { className: "mr-1", children: "Next" }),
                 /* @__PURE__ */ jsx(ChevronRightIcon, {})
@@ -9054,6 +9161,7 @@ function Pagination({
     {
       "aria-label": "Pagination",
       className: cn("flex items-center justify-between gap-4", className),
+      "data-testid": testId,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
           itemsRange && /* @__PURE__ */ jsxs("span", { className: cn("text-primary-600 dark:text-primary-400", currentSize.text), children: [
@@ -9100,6 +9208,7 @@ function Pagination({
               onClick: handlePrevious,
               disabled: disabled || !canGoPrevious,
               "aria-label": "Previous page",
+              "data-testid": testId ? `${testId}-prev` : void 0,
               className: cn(
                 "inline-flex items-center justify-center rounded-md",
                 "border border-primary-300 dark:border-primary-600",
@@ -9134,6 +9243,7 @@ function Pagination({
                 disabled,
                 "aria-label": `Page ${page}`,
                 "aria-current": page === currentPage ? "page" : void 0,
+                "data-testid": testId ? `${testId}-page-${page}` : void 0,
                 className: cn(
                   "inline-flex items-center justify-center rounded-md",
                   "border transition-colors",
@@ -9162,6 +9272,7 @@ function Pagination({
               onClick: handleNext,
               disabled: disabled || !canGoNext,
               "aria-label": "Next page",
+              "data-testid": testId ? `${testId}-next` : void 0,
               className: cn(
                 "inline-flex items-center justify-center rounded-md",
                 "border border-primary-300 dark:border-primary-600",
@@ -9229,7 +9340,8 @@ function MultiSelect({
   required = false,
   disabled = false,
   fullWidth = false,
-  className
+  className,
+  testId
 }) {
   const [query, setQuery] = useState("");
   const searchInputRef = useRef(null);
@@ -9285,12 +9397,13 @@ function MultiSelect({
   };
   const displayedChips = selectedOptions.slice(0, maxDisplayedItems);
   const hiddenCount = selectedOptions.length - maxDisplayedItems;
-  return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto", className), "data-testid": testId, children: [
     label && /* @__PURE__ */ jsxs(
       "label",
       {
         id: labelId,
         className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white",
+        "data-testid": testId ? `${testId}-label` : void 0,
         children: [
           label,
           required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -9318,7 +9431,7 @@ function MultiSelect({
                 hasError ? "border-error focus-within:border-error focus-within:ring-2 focus-within:ring-error/20" : "border-primary-300 dark:border-primary-600 focus-within:border-gold-500 focus-within:ring-2 focus-within:ring-gold-500/20"
               ),
               children: [
-                displayedChips.map((option) => /* @__PURE__ */ jsxs(
+                displayedChips.map((option, index2) => /* @__PURE__ */ jsxs(
                   "span",
                   {
                     className: cn(
@@ -9326,6 +9439,7 @@ function MultiSelect({
                       "bg-primary-100 dark:bg-primary-700",
                       "text-sm text-primary-700 dark:text-primary-200"
                     ),
+                    "data-testid": testId ? `${testId}-chip-${index2}` : void 0,
                     children: [
                       option.label,
                       /* @__PURE__ */ jsx(
@@ -9384,8 +9498,10 @@ function MultiSelect({
               children: /* @__PURE__ */ jsx(
                 Bt,
                 {
+                  portal: true,
                   static: true,
                   className: "absolute z-dropdown mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-primary-800 dark:ring-primary-700",
+                  "data-testid": testId ? `${testId}-options` : void 0,
                   children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-2.5 text-primary-500 dark:text-primary-400", children: [
                     /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "primary" }),
                     /* @__PURE__ */ jsx("span", { children: loadingText })
@@ -9401,6 +9517,7 @@ function MultiSelect({
                           value: query,
                           onChange: handleSearchChange,
                           placeholder: "Search...",
+                          "data-testid": testId ? `${testId}-input` : void 0,
                           className: cn(
                             "w-full rounded border border-primary-300 px-2 py-1 text-sm",
                             "bg-white dark:bg-primary-900",
@@ -9442,11 +9559,12 @@ function MultiSelect({
                         ]
                       }
                     ),
-                    filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-2.5 text-primary-500 dark:text-primary-400", children: emptyText }) : filteredOptions.map((option) => /* @__PURE__ */ jsxs(
+                    filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-2.5 text-primary-500 dark:text-primary-400", children: emptyText }) : filteredOptions.map((option, index2) => /* @__PURE__ */ jsxs(
                       It,
                       {
                         value: option.value,
                         disabled: option.disabled,
+                        "data-testid": testId ? `${testId}-option-${index2}` : void 0,
                         className: ({ active }) => cn(
                           "flex cursor-pointer items-center gap-2 px-4 py-2.5",
                           active && "bg-primary-50 dark:bg-primary-700",
@@ -9480,6 +9598,7 @@ function MultiSelect({
       "p",
       {
         role: hasError ? "alert" : void 0,
+        "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
         className: cn(
           "mt-1.5 text-sm",
           hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -9548,6 +9667,7 @@ function SidebarItem({
   onNavigate,
   LinkComponent,
   className,
+  testId,
   ...props
 }) {
   if (!shouldShowItem(item)) {
@@ -9594,6 +9714,7 @@ function SidebarItem({
         disabled: item.disabled,
         "aria-label": item["aria-label"] || item.label,
         title: collapsed ? item.label : void 0,
+        "data-testid": testId,
         className: cn(
           // Base styles
           "flex w-full items-center rounded-lg font-medium",
@@ -9626,6 +9747,7 @@ function SidebarItem({
     {
       to: item.href,
       onClick: handleClick,
+      "data-testid": testId,
       className: cn(
         // Base styles
         "flex items-center rounded-lg font-medium",
@@ -9763,6 +9885,7 @@ const Sidebar = forwardRef(
     collapsedWidth = "4rem",
     className,
     "aria-label": ariaLabel = "Main navigation",
+    testId,
     ...props
   }, ref) => {
     useEffect(() => {
@@ -9870,6 +9993,7 @@ const Sidebar = forwardRef(
             "focus:outline-none focus:ring-2 focus:ring-primary-500/20"
           ),
           "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+          "data-testid": testId ? `${testId}-toggle` : void 0,
           children: /* @__PURE__ */ jsx(
             "svg",
             {
@@ -9901,7 +10025,8 @@ const Sidebar = forwardRef(
         {
           className: "fixed inset-0 z-40 bg-black/20 lg:hidden",
           onClick: handleOverlayClick,
-          "aria-hidden": "true"
+          "aria-hidden": "true",
+          "data-testid": testId ? `${testId}-overlay` : void 0
         }
       ),
       /* @__PURE__ */ jsx(
@@ -9922,6 +10047,7 @@ const Sidebar = forwardRef(
           ),
           style: { width: sidebarWidth },
           "aria-label": ariaLabel,
+          "data-testid": testId,
           ...props,
           children: sidebarContent
         }
@@ -9976,7 +10102,7 @@ const variantStyles = {
   }
 };
 const Alert = forwardRef(
-  ({ variant = "info", title, message, icon, onClose, className, ...props }, ref) => {
+  ({ variant = "info", title, message, icon, onClose, className, testId, ...props }, ref) => {
     const styles = variantStyles[variant];
     const displayIcon = icon === null ? null : icon ?? defaultIcons[variant];
     return /* @__PURE__ */ jsx(
@@ -9989,9 +10115,18 @@ const Alert = forwardRef(
           styles.container,
           className
         ),
+        "data-testid": testId,
         ...props,
         children: /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-          displayIcon !== null && /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0", styles.icon), "aria-hidden": "true", children: displayIcon }),
+          displayIcon !== null && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("flex-shrink-0", styles.icon),
+              "aria-hidden": "true",
+              "data-testid": testId ? `${testId}-icon` : void 0,
+              children: displayIcon
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { className: cn("flex-1", displayIcon !== null && "ml-3"), children: [
             title && /* @__PURE__ */ jsx("h3", { className: cn("text-sm font-medium", styles.title), children: title }),
             /* @__PURE__ */ jsx("div", { className: cn("text-sm", title && "mt-1"), children: message })
@@ -10007,6 +10142,7 @@ const Alert = forwardRef(
                 "focus:ring-current/20",
                 "dark:focus:ring-offset-primary-900"
               ),
+              "data-testid": testId ? `${testId}-close-button` : void 0,
               children: [
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Dismiss" }),
                 /* @__PURE__ */ jsx(XMarkIcon, {})
@@ -10033,7 +10169,7 @@ const statusStyles = {
   busy: "bg-error"
 };
 const Avatar = forwardRef(
-  ({ name, src, size: size2 = "md", alt, status, className, ...props }, ref) => {
+  ({ name, src, size: size2 = "md", alt, status, className, testId, ...props }, ref) => {
     const getInitials = (fullName) => {
       const names = fullName.trim().split(" ");
       if (names.length === 1) {
@@ -10059,6 +10195,7 @@ const Avatar = forwardRef(
           styles.container,
           className
         ),
+        "data-testid": testId,
         ...props,
         children: [
           src ? /* @__PURE__ */ jsx(
@@ -10066,7 +10203,8 @@ const Avatar = forwardRef(
             {
               src,
               alt: alt || `${name}'s avatar`,
-              className: "w-full h-full rounded-full object-cover"
+              className: "w-full h-full rounded-full object-cover",
+              "data-testid": testId ? `${testId}-image` : void 0
             }
           ) : /* @__PURE__ */ jsx("span", { className: styles.text, children: initials }),
           status && /* @__PURE__ */ jsx(
@@ -10079,7 +10217,8 @@ const Avatar = forwardRef(
                 styles.status,
                 statusStyles[status]
               ),
-              "aria-label": `Status: ${status}`
+              "aria-label": `Status: ${status}`,
+              "data-testid": testId ? `${testId}-status` : void 0
             }
           )
         ]