@hilum/ui 3.0.0 → 3.1.0

package/dist/index.d.ts

@@ -599,6 +599,8 @@ interface InputGroupProps extends React.InputHTMLAttributes<HTMLInputElement> {
     trailingAddon?: React.ReactNode;
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
+    trailingAction?: React.ReactNode;
+    trailingActionClassName?: string;
     trailingButton?: React.ReactNode;
     error?: boolean;
     pill?: boolean;

package/dist/index.js

@@ -2455,6 +2455,8 @@ var InputGroup = React17.forwardRef(
     trailingAddon,
     leadingIcon,
     trailingIcon,
+    trailingAction,
+    trailingActionClassName,
     trailingButton,
     error,
     pill,
@@ -2464,7 +2466,8 @@ var InputGroup = React17.forwardRef(
   }, ref) => {
     const radius = pill ? "rounded-full" : "rounded-lg";
     const hasLeading = leadingAddon || leadingIcon;
-    const hasTrailing = trailingAddon || trailingIcon || trailingButton || error;
+    const hasInsetTrailing = trailingIcon || trailingAction || error;
+    const hasTrailing = trailingAddon || hasInsetTrailing || trailingButton;
     const baseInput = cn(
       "flex h-9 w-full border bg-card body text-foreground placeholder:text-muted-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:disabled:cursor-not-allowed disabled:opacity-50",
@@ -2494,13 +2497,24 @@ var InputGroup = React17.forwardRef(
             className: cn(
               baseInput,
               // Border radius
-              leadingAddon ? trailingAddon || trailingButton ? "rounded-none px-3" : pill ? "rounded-none rounded-r-full px-3" : "rounded-none rounded-r-lg px-3" : leadingIcon ? trailingAddon ? pill ? "rounded-l-full rounded-r-none pl-9 pr-3" : "rounded-l-lg rounded-r-none pl-9 pr-3" : trailingIcon || error ? cn(radius, "pl-9 pr-9") : cn(radius, "pl-9 pr-3") : trailingAddon ? pill ? "rounded-l-full rounded-r-none px-3" : "rounded-l-lg rounded-r-none px-3" : trailingIcon || error || trailingButton ? cn(radius, "pl-3 pr-9") : cn(radius, "px-3"),
+              leadingAddon ? trailingAddon || trailingButton ? "rounded-none px-3" : pill ? "rounded-none rounded-r-full px-3" : "rounded-none rounded-r-lg px-3" : leadingIcon ? trailingAddon ? pill ? "rounded-l-full rounded-r-none pl-9 pr-3" : "rounded-l-lg rounded-r-none pl-9 pr-3" : hasInsetTrailing ? cn(radius, "pl-9 pr-9") : cn(radius, "pl-9 pr-3") : trailingAddon ? pill ? "rounded-l-full rounded-r-none px-3" : "rounded-l-lg rounded-r-none px-3" : hasInsetTrailing ? cn(radius, "pl-3 pr-9") : cn(radius, "px-3"),
+              trailingAction && "pr-14",
               className
             ),
             ...props
           }
         ),
-        (trailingIcon || error) && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: error ? /* @__PURE__ */ jsx(AlertCircle, { size: 15, className: "text-destructive" }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: trailingIcon }) })
+        (trailingIcon || error) && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: error ? /* @__PURE__ */ jsx(AlertCircle, { size: 15, className: "text-destructive" }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: trailingIcon }) }),
+        trailingAction && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-y-0 right-2 flex items-center",
+              trailingActionClassName
+            ),
+            children: trailingAction
+          }
+        )
       ] }),
       trailingAddon && /* @__PURE__ */ jsx(
         "span",