@underverse-ui/underverse 1.0.42 → 1.0.44

package/dist/index.d.cts

@@ -161,6 +161,8 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">
     hint?: string;
     counter?: boolean;
     maxLength?: number;
+    /** Custom content rendered inside the input container (positioned absolutely) */
+    rightAddon?: React__default.ReactNode;
 }
 declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;
 interface SearchInputProps extends Omit<InputProps, "leftIcon" | "type"> {

package/dist/index.d.ts

@@ -161,6 +161,8 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">
     hint?: string;
     counter?: boolean;
     maxLength?: number;
+    /** Custom content rendered inside the input container (positioned absolutely) */
+    rightAddon?: React__default.ReactNode;
 }
 declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;
 interface SearchInputProps extends Omit<InputProps, "leftIcon" | "type"> {

package/dist/index.js

@@ -1533,6 +1533,7 @@ var Input = forwardRef3(
     type = "text",
     value,
     maxLength,
+    rightAddon,
     ...rest
   }, ref) => {
     const [localError, setLocalError] = useState4(error);
@@ -1622,6 +1623,7 @@ var Input = forwardRef3(
       onClear: _onClear,
       hint: _hint,
       counter: _counter,
+      rightAddon: _rightAddon,
       ...restInput
     } = rest;
     const handleFocus = (e) => {
@@ -1764,6 +1766,7 @@ var Input = forwardRef3(
             }
           )
         ] }),
+        rightAddon,
         variant === "minimal" && /* @__PURE__ */ jsx7(
           "div",
           {
@@ -1909,80 +1912,89 @@ var NumberInput = forwardRef3(
         onChange({ target: { value: newValue.toString() } });
       }
     };
-    return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+    const inputSize = props.size || "md";
+    const stepperSizeStyles = {
+      sm: { width: "w-7", icon: { width: 8, height: 5, path: { up: "M4 1L7 4H1L4 1Z", down: "M4 4L1 1H7L4 4Z" } } },
+      md: { width: "w-9", icon: { width: 10, height: 6, path: { up: "M5 1L9 5H1L5 1Z", down: "M5 5L1 1H9L5 5Z" } } },
+      lg: { width: "w-11", icon: { width: 12, height: 7, path: { up: "M6 1L11 6H1L6 1Z", down: "M6 6L1 1H11L6 6Z" } } }
+    };
+    const ss = stepperSizeStyles[inputSize];
+    const stepperAddon = showSteppers ? /* @__PURE__ */ jsxs5("div", { className: cn("absolute right-0 inset-y-0 flex flex-col border-l border-border rounded-r-full overflow-hidden", ss.width), children: [
       /* @__PURE__ */ jsx7(
-        Input,
+        "button",
         {
-          ref,
-          type: formatThousands ? "text" : "number",
-          min,
-          max,
-          step,
-          rightIcon: showSteppers ? void 0 : props.rightIcon,
-          value: displayValue,
-          onChange: (e) => {
-            if (!onChange) return;
-            if (!formatThousands) return onChange(e);
-            const raw = e.target.value;
-            const parsed = parse(raw);
-            if (Number.isNaN(parsed)) {
-              setDisplayValue("");
-              onChange({ target: { value: "" } });
-            } else {
-              const bounded = Math.min(Math.max(parsed, min ?? -Infinity), max ?? Infinity);
-              setDisplayValue(format(bounded));
-              onChange({ target: { value: bounded.toString() } });
-            }
-          },
-          ...props,
+          type: "button",
+          onClick: handleIncrement,
+          disabled: max !== void 0 && currentValue >= max,
           className: cn(
-            showSteppers && [
-              "pr-12",
-              // Hide native browser steppers
-              "[&::-webkit-outer-spin-button]:appearance-none",
-              "[&::-webkit-inner-spin-button]:appearance-none",
-              "[&::-webkit-inner-spin-button]:m-0",
-              "appearance-none"
-            ],
-            props.className
-          )
+            "flex-1 flex items-center justify-center transition-colors",
+            "hover:bg-accent active:bg-accent/80",
+            "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset",
+            "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+            "text-muted-foreground hover:text-foreground"
+          ),
+          "aria-label": "Increase value",
+          children: /* @__PURE__ */ jsx7("svg", { width: ss.icon.width, height: ss.icon.height, viewBox: `0 0 ${ss.icon.width} ${ss.icon.height}`, fill: "none", className: "shrink-0", children: /* @__PURE__ */ jsx7("path", { d: ss.icon.path.up, fill: "currentColor" }) })
         }
       ),
-      showSteppers && /* @__PURE__ */ jsxs5("div", { className: "absolute right-4 top-1/2 -translate-y-1/7 flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsx7(
-          "button",
-          {
-            type: "button",
-            onClick: handleIncrement,
-            disabled: max !== void 0 && currentValue >= max,
-            className: cn(
-              "flex items-center justify-center w-4 h-4 rounded-md transition-colors",
-              "hover:bg-accent focus:outline-none focus:bg-accent",
-              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-              "text-muted-foreground hover:text-foreground"
-            ),
-            "aria-label": "Increase value",
-            children: /* @__PURE__ */ jsx7("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "shrink-0", children: /* @__PURE__ */ jsx7("path", { d: "M4 2L6 6H2L4 2Z", fill: "currentColor" }) })
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          "button",
-          {
-            type: "button",
-            onClick: handleDecrement,
-            disabled: min !== void 0 && currentValue <= min,
-            className: cn(
-              "flex items-center justify-center w-4 h-4 rounded-md transition-colors",
-              "hover:bg-accent focus:outline-none focus:bg-accent",
-              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-              "text-muted-foreground hover:text-foreground"
-            ),
-            "aria-label": "Decrease value",
-            children: /* @__PURE__ */ jsx7("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "shrink-0", children: /* @__PURE__ */ jsx7("path", { d: "M4 6L2 2H6L4 6Z", fill: "currentColor" }) })
+      /* @__PURE__ */ jsx7("div", { className: "h-px bg-border" }),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          onClick: handleDecrement,
+          disabled: min !== void 0 && currentValue <= min,
+          className: cn(
+            "flex-1 flex items-center justify-center transition-colors",
+            "hover:bg-accent active:bg-accent/80",
+            "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset",
+            "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+            "text-muted-foreground hover:text-foreground"
+          ),
+          "aria-label": "Decrease value",
+          children: /* @__PURE__ */ jsx7("svg", { width: ss.icon.width, height: ss.icon.height, viewBox: `0 0 ${ss.icon.width} ${ss.icon.height}`, fill: "none", className: "shrink-0", children: /* @__PURE__ */ jsx7("path", { d: ss.icon.path.down, fill: "currentColor" }) })
+        }
+      )
+    ] }) : void 0;
+    return /* @__PURE__ */ jsx7(
+      Input,
+      {
+        ref,
+        type: formatThousands ? "text" : "number",
+        min,
+        max,
+        step,
+        rightIcon: showSteppers ? void 0 : props.rightIcon,
+        rightAddon: stepperAddon,
+        value: displayValue,
+        onChange: (e) => {
+          if (!onChange) return;
+          if (!formatThousands) return onChange(e);
+          const raw = e.target.value;
+          const parsed = parse(raw);
+          if (Number.isNaN(parsed)) {
+            setDisplayValue("");
+            onChange({ target: { value: "" } });
+          } else {
+            const bounded = Math.min(Math.max(parsed, min ?? -Infinity), max ?? Infinity);
+            setDisplayValue(format(bounded));
+            onChange({ target: { value: bounded.toString() } });
           }
+        },
+        ...props,
+        className: cn(
+          showSteppers && [
+            "pr-12",
+            // Hide native browser steppers
+            "[&::-webkit-outer-spin-button]:appearance-none",
+            "[&::-webkit-inner-spin-button]:appearance-none",
+            "[&::-webkit-inner-spin-button]:m-0",
+            "appearance-none"
+          ],
+          props.className
         )
-      ] })
-    ] });
+      }
+    );
   }
 );
 NumberInput.displayName = "NumberInput";
@@ -2058,7 +2070,7 @@ var Textarea = forwardRef3(
           onFocus: () => setIsFocused(true),
           onBlur: () => setIsFocused(false),
           className: cn(
-            "w-full rounded-2xl px-4 py-3 text-sm text-foreground transition-all duration-200",
+            "w-full rounded-2xl md:rounded-3xl px-4 py-3 text-sm text-foreground transition-all duration-200",
             "placeholder:text-muted-foreground focus:outline-none min-h-20",
             "disabled:cursor-not-allowed disabled:opacity-50",
             variantStyles6[variant],